From a0bb72d0a39373c4fccc019a600a61492b4be658 Mon Sep 17 00:00:00 2001
From: rayyan224 <rayyan5926439@gmail.com>
Date: Sat, 26 Feb 2022 15:19:03 -0500
Subject: [PATCH 1/2] feat: Intial Implantiation of value feature

---
 src/components/Select/Select.stories.tsx |  9 +++++++++
 src/components/Select/Select.tsx         | 11 +++++++++++
 src/components/Select/types.ts           |  5 +++++
 3 files changed, 25 insertions(+)

diff --git a/src/components/Select/Select.stories.tsx b/src/components/Select/Select.stories.tsx
index 982aceee0..4f96b9c17 100644
--- a/src/components/Select/Select.stories.tsx
+++ b/src/components/Select/Select.stories.tsx
@@ -162,3 +162,12 @@ Nodata.args = {
     label: 'Label Text',
     defaultOptionIndex: 0,
 };
+
+export const ControlledValue = Template.bind({});
+ControlledValue.args = {
+    options: smallOptionsList,
+    onChange: onTestOptionChange,
+    label: 'Label Text',
+    value: 'txt',
+    defaultOptionIndex: 0,
+};
diff --git a/src/components/Select/Select.tsx b/src/components/Select/Select.tsx
index 87054099e..70e10962f 100644
--- 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
index cd36b90e5..e65bfa699 100644
--- 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
      */

From 3342f5cc7bf75d0d119488dd80779235759e3eea Mon Sep 17 00:00:00 2001
From: rayyan224 <rayyan5926439@gmail.com>
Date: Sat, 26 Feb 2022 15:20:31 -0500
Subject: [PATCH 2/2] chore:remove default from story

---
 src/components/Select/Select.stories.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/Select/Select.stories.tsx b/src/components/Select/Select.stories.tsx
index 4f96b9c17..428c0c207 100644
--- a/src/components/Select/Select.stories.tsx
+++ b/src/components/Select/Select.stories.tsx
@@ -169,5 +169,4 @@ ControlledValue.args = {
     onChange: onTestOptionChange,
     label: 'Label Text',
     value: 'txt',
-    defaultOptionIndex: 0,
 };