Merge pull request #95 from reaviz/select-default-filter

Select: support for default filter
reaviz · Jan 4, 2024 · 79f976d · 79f976d
2 parents b4a04f3 + 81d1b39
commit 79f976d
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 0 deletions.
diff --git 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
@@ -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>
+  );
+};