Merge pull request #160 from web3ui/feat/SelectValue

Feat/select controlled value
web3ui · Feb 27, 2022 · 951b7f0 · 951b7f0
2 parents 1647ee6 + d92745f
commit 951b7f0
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 0 deletions.
diff --git a/src/components/Select/Select.stories.tsx b/src/components/Select/Select.stories.tsx
@@ -162,3 +162,11 @@ Nodata.args = {
     label: 'Label Text',
     defaultOptionIndex: 0,
 };
+
+export const ControlledValue = Template.bind({});
+ControlledValue.args = {
+    options: smallOptionsList,
+    onChange: onTestOptionChange,
+    label: 'Label Text',
+    value: 'txt',
+};
diff --git a/src/components/Select/Select.tsx b/src/components/Select/Select.tsx
@@ -22,6 +22,7 @@ const {
 const Select: React.FC<SelectProps> = ({
     defaultOptionIndex,
     disabled = false,
+    value,
     errorMessage = '',
     id = String(Date.now()),
     label,
@@ -62,6 +63,16 @@ const Select: React.FC<SelectProps> = ({
             document.removeEventListener('click', handleClickOutside);
         };
     }, []);
+    useEffect(() => {
+        if (value) {
+            const valueOptionItem = options.find(
+                (optionItem) => optionItem.id == value,
+            );
+            setSelectedOptionIndex(
+                valueOptionItem ? options.indexOf(valueOptionItem) : 0,
+            );
+        }
+    }, [selectedOptionIndex, value]);
 
     return (
         <DivStyledWrapper

diff --git a/src/components/Select/types.ts b/src/components/Select/types.ts
@@ -11,6 +11,11 @@ export interface SelectProps {
      */
     label?: string;
 
+    /**
+     * Id of the Option that you want the Select to have. Use to control the value of the option
+     */
+    value?: string;
+
     /**
      * standard onChange that returns the entire event, as normal you can access event.target
      */