diff --git a/src/components/Select/Select.tsx b/src/components/Select/Select.tsx index 22dba73d51..d2d7d60255 100644 --- a/src/components/Select/Select.tsx +++ b/src/components/Select/Select.tsx @@ -97,6 +97,7 @@ export const Select = React.forwardRef(function onClose, id, hasCounter, + closeOnSelect, renderCounter, title, } = props; @@ -116,6 +117,7 @@ export const Select = React.forwardRef(function defaultValue, defaultOpen, multiple, + closeOnSelect, open: propsOpen, onClose, onOpenChange, diff --git a/src/components/Select/types.ts b/src/components/Select/types.ts index 7f88949748..810d8ff932 100644 --- a/src/components/Select/types.ts +++ b/src/components/Select/types.ts @@ -158,8 +158,10 @@ export type SelectProps = QAProps & | React.ReactElement, typeof OptionGroup> | React.ReactElement, typeof OptionGroup>[]; id?: string; - /**Shows selected options count if multiple selection is avalable */ + /** Shows selected options count if multiple selection is avalable */ hasCounter?: boolean; + /** Close popup when value changed */ + closeOnSelect?: boolean; title?: string; name?: string; form?: string; diff --git a/src/hooks/useSelect/types.ts b/src/hooks/useSelect/types.ts index 9e7b203514..ffd513072e 100644 --- a/src/hooks/useSelect/types.ts +++ b/src/hooks/useSelect/types.ts @@ -11,6 +11,7 @@ export type UseSelectProps = { value?: string[]; defaultValue?: string[]; multiple?: boolean; + closeOnSelect?: boolean; onUpdate?: (value: string[]) => void; disabled?: boolean; } & UseOpenProps; diff --git a/src/hooks/useSelect/useSelect.ts b/src/hooks/useSelect/useSelect.ts index cce9826692..cfa1b2cbbc 100644 --- a/src/hooks/useSelect/useSelect.ts +++ b/src/hooks/useSelect/useSelect.ts @@ -13,6 +13,7 @@ export const useSelect = ({ value: valueProps, defaultValue = [], multiple, + closeOnSelect: propsCloseOnSelect, onUpdate, disabled, }: UseSelectProps): UseSelectResult => { @@ -25,6 +26,13 @@ export const useSelect = ({ open, }); + /** + * Old behaviour backward compatibility. + * For multiple select - false. + * For single select - true. + */ + const closeOnSelect = typeof propsCloseOnSelect === 'boolean' ? propsCloseOnSelect : !multiple; + const setValue = React.useCallback( (v: string[]) => { if (!disabled) { @@ -34,6 +42,12 @@ export const useSelect = ({ [setValueInner, disabled], ); + const handleCloseOnSelect = React.useCallback(() => { + if (closeOnSelect) { + toggleOpen(false); + } + }, [closeOnSelect, toggleOpen]); + const handleSingleSelection = React.useCallback( (option: UseSelectOption) => { if (!value.includes(option.value)) { @@ -41,9 +55,9 @@ export const useSelect = ({ setValue(nextValue); } - toggleOpen(false); + handleCloseOnSelect(); }, - [value, setValue, toggleOpen], + [value, setValue, handleCloseOnSelect], ); const handleMultipleSelection = React.useCallback( @@ -54,8 +68,10 @@ export const useSelect = ({ : [...value, option.value]; setValue(nextValue); + + handleCloseOnSelect(); }, - [value, setValue], + [value, setValue, handleCloseOnSelect], ); const handleSelection = React.useCallback(