From fac3e8c87def42a04c6452bbd1ff90a1053b9df1 Mon Sep 17 00:00:00 2001
From: Stefano Pigozzi <me@steffo.eu>
Date: Thu, 19 Aug 2021 23:01:11 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=9A=A7=20Fix=20`Select`=20and=20`Multisel?=
 =?UTF-8?q?ect`?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/inputs/Multiselect.tsx       | 25 +++++++++++++++++----
 src/components/inputs/MultiselectContext.ts |  5 +++++
 src/components/inputs/Select.tsx            |  9 ++++----
 src/components/inputs/SelectContext.ts      |  5 +++++
 src/types.ts                                |  6 ++++-
 5 files changed, 40 insertions(+), 10 deletions(-)
 create mode 100644 src/components/inputs/MultiselectContext.ts
 create mode 100644 src/components/inputs/SelectContext.ts

diff --git a/src/components/inputs/Multiselect.tsx b/src/components/inputs/Multiselect.tsx
index a820d8f..970df5a 100644
--- a/src/components/inputs/Multiselect.tsx
+++ b/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}/>
     )
 }
diff --git a/src/components/inputs/MultiselectContext.ts b/src/components/inputs/MultiselectContext.ts
new file mode 100644
index 0000000..0311e80
--- /dev/null
+++ b/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[]>
diff --git a/src/components/inputs/Select.tsx b/src/components/inputs/Select.tsx
index e6873c0..cb22aa5 100644
--- a/src/components/inputs/Select.tsx
+++ b/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}>
-            // TODO
-        </BaseElement>
+        <BaseElement kind={"select"} multiple={false} onChange={onChangeWrapper} {...props}/>
     )
 }
diff --git a/src/components/inputs/SelectContext.ts b/src/components/inputs/SelectContext.ts
new file mode 100644
index 0000000..7dc71a5
--- /dev/null
+++ b/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>
diff --git a/src/types.ts b/src/types.ts
index 073fcf4..14430dd 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -6,4 +6,8 @@ export type {Argument as ClassNames} from "classnames"
 // export type FunctionComponentKind = (props: object) => JSX.Element
 // export type ClassComponentKind = typeof React.Component
 // export type ComponentKind = IntrinsicComponentKind | FunctionComponentKind | ClassComponentKind
-export type ComponentKind = any
\ No newline at end of file
+export type ComponentKind = any
+
+
+
+export type UseStateContext<S> = React.Context<null | [S, React.Dispatch<React.SetStateAction<S>>]>
\ No newline at end of file