From 81d1b390fc8f09f52faf443b45658e4194979dac Mon Sep 17 00:00:00 2001
From: Shaswat <shaswat.dba@gmail.com>
Date: Thu, 4 Jan 2024 17:26:21 +0530
Subject: [PATCH] select: support for default filter

---
 src/form/Select/Select.tsx             | 14 ++++++++++++++
 src/form/Select/SingleSelect.story.tsx | 21 +++++++++++++++++++++
 2 files changed, 35 insertions(+)

diff --git a/src/form/Select/Select.tsx b/src/form/Select/Select.tsx
index 3e22ec81..29b438a7 100644
--- a/src/form/Select/Select.tsx
+++ b/src/form/Select/Select.tsx
@@ -70,6 +70,11 @@ export interface SelectProps {
    */
   value?: string | string[];
 
+  /**
+   * The deafult value of the input filter.
+   */
+  defaultFilterValue?: string;
+
   /**
    * Whether the select is required or not.
    */
@@ -209,6 +214,7 @@ export const Select: FC<Partial<SelectProps>> = ({
   activeClassName,
   children,
   value,
+  defaultFilterValue,
   required,
   input,
   menu,
@@ -261,6 +267,14 @@ export const Select: FC<Partial<SelectProps>> = ({
     }
   }, [keyword, index, setIndex, result]);
 
+  useEffect(() => {
+    // Run only on initial render
+    if (!value && defaultFilterValue) {
+      search(defaultFilterValue);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
   const groups = useMemo(() => getGroups(result), [result]);
 
   const selectedOption: SelectValue = useMemo(() => {
diff --git a/src/form/Select/SingleSelect.story.tsx b/src/form/Select/SingleSelect.story.tsx
index 3fbfcefc..d599a3fa 100644
--- a/src/form/Select/SingleSelect.story.tsx
+++ b/src/form/Select/SingleSelect.story.tsx
@@ -557,3 +557,24 @@ export const TabToSelect = () => {
     </div>
   );
 };
+
+export const DefaultFilter = () => {
+  const [value, setValue] = useState<string | null>(null);
+  return (
+    <div style={{ width: 300 }}>
+      <Select
+        placeholder="Select a category..."
+        value={value}
+        onChange={v => {
+          setValue(v);
+          console.log('onChange', v);
+        }}
+        defaultFilterValue="twi"
+      >
+        <SelectOption value="facebook">facebook</SelectOption>
+        <SelectOption value="twitter">twitter</SelectOption>
+        <SelectOption value="twitch">twitch</SelectOption>
+      </Select>
+    </div>
+  );
+};