Feat: Added closeOnChangedValue functionality. (#555)

hc-oss · Feb 16, 2022 · 820f748 · 820f748
1 parent 536d979
commit 820f748
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 0 deletions.
diff --git a/README.md b/README.md
@@ -81,6 +81,7 @@ More examples can be found [here ↗](https://react-multi-select-component.pages
 | `ClearSelectedIcon`   | Custom Clear Icon for Selected Items                                                                                                              | `ReactNode`                  |                |
 | `isCreatable`         | Allows user to create unavailable option(s) [example ↗](https://react-multi-select-component.pages.dev/?path=/story/creatable--creatable-default) | `boolean`                    | `false`        |
 | `onCreateOption`      | allows to override newly created option [example ↗](https://react-multi-select-component.pages.dev/?path=/story/creatable--creatable-custom)      | `function`                   |                |
+| `closeOnChangedValue` | automatically closes dropdown when its value is changed                                                                                           | `boolean`                    | `false`        |
 
 ## 📝 Changelog
 

diff --git a/src/lib/interfaces.ts b/src/lib/interfaces.ts
@@ -34,4 +34,5 @@ export interface ISelectProps {
   isOpen?: boolean;
   isCreatable?: boolean;
   onCreateOption?;
+  closeOnChangedValue?: boolean;
 }
diff --git a/src/multi-select/dropdown.tsx b/src/multi-select/dropdown.tsx
@@ -29,8 +29,15 @@ const Dropdown = () => {
     isOpen,
     defaultIsOpen,
     ClearSelectedIcon,
+    closeOnChangedValue
   } = useMultiSelect();
 
+  useEffect(() => {
+    if (closeOnChangedValue) {
+      setExpanded(false)
+    }
+  }, [value])
+
   const [isInternalExpand, setIsInternalExpand] = useState(true);
   const [expanded, setExpanded] = useState(defaultIsOpen);
   const [hasFocus, setHasFocus] = useState(false);