Merge pull request #1689 from fremtind/feat/select-ref

Legg til ref forwarding i Select
fremtind · Jan 5, 2021 · db76511 · db76511
2 parents 5cd507e + 517c66c
commit db76511
Show file tree

Hide file tree

Showing 3 changed files with 245 additions and 171 deletions.
diff --git a/packages/select-react/documentation/Example.tsx b/packages/select-react/documentation/Example.tsx
@@ -1,4 +1,4 @@
-import React, { FocusEvent, useState, ChangeEvent } from "react";
+import React, { useState, ChangeEvent, FocusEvent, useRef, useEffect } from "react";
 import { ExampleComponentProps } from "@fremtind/jkl-portal-components";
 import { Select, NativeSelect } from "../src";
 import { LabelVariant } from "@fremtind/jkl-core";
@@ -14,26 +14,44 @@ export const Example = ({ boolValues, choiceValues }: ExampleComponentProps) =>
     ];
     const [value, setValue] = useState<string>();
     const universalSetValue = (input: string | ChangeEvent<HTMLSelectElement> | undefined) => {
+        let eventValue;
         if (typeof input === "string") {
-            setValue(input);
+            eventValue = input;
         } else if (input) {
-            setValue(input.target.value);
+            eventValue = input.target.value;
         }
+        setValue(eventValue);
+        console.log("Change: ", eventValue);
     };
 
+    const errorLabel = boolValues && boolValues["Med feil"] ? "Beskrivende feilmelding" : undefined;
+    const helpLabel = boolValues && boolValues["Med hjelpetekst"] ? "Hjelpsom beskjed" : undefined;
+    const variant = choiceValues && (choiceValues["Etikettvariant"] as LabelVariant);
+    const searchAble = boolValues && boolValues["Med søk"];
+
+    const selectRef = useRef<HTMLSelectElement>(null);
+    useEffect(() => {
+        const select = selectRef.current;
+        select?.addEventListener("change", (e: unknown) =>
+            console.log("Verdi fra selectRef:", (e as ChangeEvent<HTMLSelectElement>).target.value),
+        );
+        return () => {
+            select?.removeEventListener("change", (e: unknown) =>
+                console.log("Verdi fra selectRef:", (e as ChangeEvent<HTMLSelectElement>).target.value),
+            );
+        };
+    }, [selectRef]);
     const onFocus = (input: string | FocusEvent<HTMLSelectElement> | undefined) => {
         console.log("Focus: ", input);
     };
     const onBlur = (input: string | FocusEvent<HTMLSelectElement> | undefined) => {
         console.log("Blur: ", input);
     };
 
-    const errorLabel = boolValues && boolValues["Med feil"] ? "Beskrivende feilmelding" : undefined;
-    const helpLabel = boolValues && boolValues["Med hjelpetekst"] ? "Hjelpsom beskjed" : undefined;
-    const variant = choiceValues && (choiceValues["Etikettvariant"] as LabelVariant);
-    const searchAble = boolValues && boolValues["Med søk"];
     return (
         <C
+            ref={selectRef}
+            name="produsent"
             forceCompact={boolValues && boolValues["Kompakt"]}
             inverted={boolValues && boolValues["Invertert"]}
             variant={variant}
@@ -44,8 +62,8 @@ export const Example = ({ boolValues, choiceValues }: ExampleComponentProps) =>
             errorLabel={errorLabel}
             onChange={universalSetValue}
             searchable={searchAble}
-            onBlur={onBlur}
             onFocus={onFocus}
+            onBlur={onBlur}
         />
     );
 };

diff --git a/packages/select-react/src/NativeSelect.tsx b/packages/select-react/src/NativeSelect.tsx
@@ -9,6 +9,7 @@ import { ExpandArrow } from "./ExpandArrow";
 
 interface Props {
     id?: string;
+    name?: string;
     label: string;
     items: Array<string | ValuePair>;
     className?: string;
@@ -30,6 +31,7 @@ export const NativeSelect = forwardRef<HTMLSelectElement, Props>(
     (
         {
             id,
+            name,
             label,
             items,
             className = "",
@@ -75,6 +77,7 @@ export const NativeSelect = forwardRef<HTMLSelectElement, Props>(
                     <select
                         ref={ref}
                         id={uid}
+                        name={name}
                         value={value}
                         defaultValue={defaultValue}
                         className="jkl-select__button"