diff --git a/pages/index.js b/pages/index.js index 6d203f0..accd90a 100644 --- a/pages/index.js +++ b/pages/index.js @@ -59,7 +59,8 @@ const SELECT_OPTIONS = [ "isMultiple", "isDisabled", "loading", - "isGroupOption" + "isGroupOption", + "closeOnSelect" ]; const printAlertContent = (element, value) => { @@ -79,6 +80,8 @@ const printAlertContent = (element, value) => { return printText("A loader appears on the field", value); case "isGroupOption": return printText("The options of the select field are grouped", value); + case "closeOnSelect": + return printText("Close dropdown every time an option is selected", value); default: return null; } @@ -91,6 +94,7 @@ const Home = () => { const [value, setValue] = useState(null); const [isClearable, setIsClearable] = useState(false); const [isMultiple, setIsMultiple] = useState(false); + const [closeOnSelect, setCloseOnSelect] = useState(false); const [isSearchable, setIsSearchable] = useState(false); const [isDisabled, setIsDisabled] = useState(false); const [isGroupOption, setIsGroupOption] = useState(false); @@ -139,6 +143,10 @@ const Home = () => { } if (action === "get") return isMultiple; break; + case "closeOnSelect": + if (action === "set") setCloseOnSelect(valueData); + if (action === "get") return closeOnSelect; + break; case "isDisabled": if (action === "set") setIsDisabled(valueData); if (action === "get") return isDisabled; @@ -158,7 +166,16 @@ const Home = () => { break; } }, - [isClearable, isDisabled, isGroupOption, isMultiple, isSearchable, loading, value] + [ + isClearable, + isDisabled, + isGroupOption, + isMultiple, + closeOnSelect, + isSearchable, + loading, + value + ] ); const handleCheck = useCallback( @@ -239,6 +256,7 @@ const Home = () => { isClearable={isClearable} isSearchable={isSearchable} isMultiple={isMultiple} + closeOnSelect={closeOnSelect} /*formatGroupLabel={(data) => (
{data.label} @@ -282,6 +300,7 @@ const Home = () => { {printAlertContent("isDisabled", isDisabled)} {printAlertContent("loading", loading)} {printAlertContent("isGroupOption", isGroupOption)} + {printAlertContent("closeOnSelect", closeOnSelect)}
)} diff --git a/src/components/Select.tsx b/src/components/Select.tsx index ceef277..6b11279 100755 --- a/src/components/Select.tsx +++ b/src/components/Select.tsx @@ -27,7 +27,8 @@ const Select: React.FC = ({ primaryColor = DEFAULT_THEME, formatGroupLabel = null, formatOptionLabel = null, - classNames + classNames, + closeOnSelect = false }) => { const [open, setOpen] = useState(menuIsOpen); const [list, setList] = useState(options); @@ -95,7 +96,7 @@ const Select: React.FC = ({ const handleValueChange = useCallback( (selected: Option) => { function update() { - if (!isMultiple && !Array.isArray(value)) { + if ((!isMultiple && !Array.isArray(value)) || closeOnSelect) { closeDropDown(); onChange(selected); } diff --git a/src/components/type.ts b/src/components/type.ts index 1e5b8dc..ec2115d 100644 --- a/src/components/type.ts +++ b/src/components/type.ts @@ -52,4 +52,5 @@ export interface SelectProps { formatGroupLabel?: ((data: GroupOption) => JSX.Element) | null; formatOptionLabel?: ((data: Option) => JSX.Element) | null; classNames?: ClassNames; + closeOnSelect?: boolean; }