Merge pull request #179 from codegouvfr/fix/select-next-targets-type

fix wrong type on target / currentTarget on SelectNext

Author: garronej

src/SelectNext.tsx

@@ -34,11 +34,24 @@ export type SelectProps<Options extends SelectProps.Option[]> = {
         value?: Options[number]["value"];
         onChange?: (
             e: Omit<ChangeEvent<HTMLSelectElement>, "target" | "currentTarget"> & {
-                target: Omit<ChangeEvent<HTMLSelectElement>, "value"> & {
+                target: Omit<EventTarget & HTMLSelectElement, "value" | "selectedOptions"> & {
                     value: Options[number]["value"];
+                    selectedOptions: HTMLCollectionOf<
+                        Omit<HTMLOptionElement, "value"> & {
+                            value: Options[number]["value"];
+                        }
+                    >;
                 };
-                currentTarget: Omit<ChangeEvent<HTMLSelectElement>, "value"> & {
+                currentTarget: Omit<
+                    EventTarget & HTMLSelectElement,
+                    "value" | "selectedOptions"
+                > & {
                     value: Options[number]["value"];
+                    selectedOptions: HTMLCollectionOf<
+                        Omit<HTMLOptionElement, "value"> & {
+                            value: Options[number]["value"];
+                        }
+                    >;
                 };
             }
         ) => void;

test/types/Select.tsx

@@ -262,3 +262,37 @@ import { assert, type Equals } from "tsafe";
         }}
     />;
 }
+
+{
+    const dogOrCatOptions = [
+        {
+            value: "dog",
+            label: "Dog"
+        },
+        {
+            value: "cat",
+            label: "Cat"
+        }
+    ] as const;
+
+    type DogOrCat = typeof dogOrCatOptions[number]["value"];
+    type SelectTarget = Omit<EventTarget & HTMLSelectElement, "value" | "selectedOptions"> & {
+        value: DogOrCat;
+        selectedOptions: HTMLCollectionOf<Omit<HTMLOptionElement, "value"> & { value: DogOrCat }>;
+    };
+    <Select
+        label="Dog or cat person?"
+        options={[...dogOrCatOptions]}
+        placeholder="Select an option"
+        nativeSelectProps={{
+            "onChange": event => {
+                assert<Equals<typeof event["currentTarget"], SelectTarget>>();
+                assert<Equals<typeof event["target"], SelectTarget>>();
+                const selectedValues = Array.from(event.target.selectedOptions).map(
+                    option => option.value
+                );
+                assert<Equals<typeof selectedValues, DogOrCat[]>>;
+            }
+        }}
+    />;
+}