🚧 Fix Select and Multiselect

src/components/inputs/Multiselect.tsx

@@ -8,17 +8,34 @@ import mergeClassNames from "classnames"
 interface MultiselectProps {
     disabled?: boolean,
 
-    onChange?: (event: React.FormEvent<HTMLInputElement>) => boolean,
+    onChange?: (contents: string[]) => boolean,
+
+    children: React.ReactNode,
 
     [props: string]: any,
 }
 
 
-export function Multiselect({...props}: MultiselectProps): JSX.Element {
+export function Multiselect({onChange, ...props}: MultiselectProps): JSX.Element {
-
     props.bluelibClassNames = mergeClassNames(props.bluelibClassNames, "input", "input-multiselect")
 
+    const onChangeWrapper = React.useCallback(
+
+        (event: React.ChangeEvent<HTMLSelectElement>): boolean => {
+            const options = Array.from(event.target.selectedOptions)
+            const contents = options.map((option: HTMLOptionElement) => option.value)
+
+            if(onChange) {
+                return onChange(contents)
+            }
+
+            return false
+        },
+
+        [onChange]
+    )
+
     return (
-        <BaseElement kind={"select"} multiple={true} {...props}/>
+        <BaseElement kind={"select"} multiple={true} onChange={onChangeWrapper} {...props}/>
     )
 }

src/components/inputs/MultiselectContext.ts

@@ -0,0 +1,5 @@
+import * as React from "react"
+import * as Types from "../../types"
+
+
+export const MultiselectContext: Types.UseStateContext<string[]> = React.createContext(null) as Types.UseStateContext<string[]>

src/components/inputs/Select.tsx

@@ -3,13 +3,13 @@ import * as ReactDOM from "react-dom"
 import * as Types from "../../types"
 import {BaseElement} from "../BaseElement"
 import mergeClassNames from "classnames"
+import {SelectContext} from "./SelectContext";
 
 
 interface SelectProps {
     disabled?: boolean,
 
     onChange?: (contents: string) => boolean,
-    value?: string,
 
     children: React.ReactNode,
 
@@ -17,7 +17,8 @@ interface SelectProps {
 }
 
 
-export function Select({onChange, children, ...props}: SelectProps): JSX.Element {
+export function Select({onChange, ...props}: SelectProps): JSX.Element {
+
     props.bluelibClassNames = mergeClassNames(props.bluelibClassNames, "input", "input-select")
 
     const onChangeWrapper = React.useCallback(
@@ -36,8 +37,6 @@ export function Select({onChange, children, ...props}: SelectProps): JSX.Element
     )
 
     return (
-        <BaseElement kind={"select"} multiple={false} {...props}>
+        <BaseElement kind={"select"} multiple={false} onChange={onChangeWrapper} {...props}/>
-            // TODO
-        </BaseElement>
     )
 }

src/components/inputs/SelectContext.ts

@@ -0,0 +1,5 @@
+import * as React from "react"
+import * as Types from "../../types"
+
+
+export const SelectContext: Types.UseStateContext<string> = React.createContext(null) as Types.UseStateContext<string>

src/types.ts

@@ -7,3 +7,7 @@ export type {Argument as ClassNames} from "classnames"
 // export type ClassComponentKind = typeof React.Component
 // export type ComponentKind = IntrinsicComponentKind | FunctionComponentKind | ClassComponentKind
 export type ComponentKind = any
+
+
+
+export type UseStateContext<S> = React.Context<null | [S, React.Dispatch<React.SetStateAction<S>>]>