fix: disable closing dropdown on space (#10945)

This commit is contained in:
Vicky Bansal 2022-02-09 12:32:57 +05:30 committed by GitHub
parent 6e1e2faaac
commit e4e7c59bc2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 10 additions and 0 deletions

View File

@ -76,6 +76,7 @@ export type DropdownProps = CommonComponentProps &
dropdownHeight?: string; dropdownHeight?: string;
dropdownMaxHeight?: string; dropdownMaxHeight?: string;
showDropIcon?: boolean; showDropIcon?: boolean;
closeOnSpace?: boolean;
dropdownTriggerIcon?: React.ReactNode; dropdownTriggerIcon?: React.ReactNode;
containerClassName?: string; containerClassName?: string;
headerLabel?: string; headerLabel?: string;
@ -793,6 +794,7 @@ export default function Dropdown(props: DropdownProps) {
helperText, helperText,
removeSelectedOption, removeSelectedOption,
hasError, hasError,
closeOnSpace = true,
} = { ...props }; } = { ...props };
const [isOpen, setIsOpen] = useState<boolean>(false); const [isOpen, setIsOpen] = useState<boolean>(false);
const [selected, setSelected] = useState<DropdownOption | DropdownOption[]>( const [selected, setSelected] = useState<DropdownOption | DropdownOption[]>(
@ -872,6 +874,12 @@ export default function Dropdown(props: DropdownProps) {
} }
break; break;
case " ": case " ":
if (closeOnSpace) {
e.preventDefault();
if (isOpen && !("length" in selected)) optionClickHandler(selected);
else onClickHandler();
}
break;
case "Enter": case "Enter":
e.preventDefault(); e.preventDefault();
if (isOpen && !("length" in selected)) optionClickHandler(selected); if (isOpen && !("length" in selected)) optionClickHandler(selected);

View File

@ -156,6 +156,7 @@ export default function CurrencyTypeDropdown(props: CurrencyDropdownProps) {
return ( return (
<DropdownContainer> <DropdownContainer>
<Dropdown <Dropdown
closeOnSpace={false}
containerClassName="currency-type-filter" containerClassName="currency-type-filter"
dropdownHeight="139px" dropdownHeight="139px"
dropdownTriggerIcon={dropdownTriggerIcon} dropdownTriggerIcon={dropdownTriggerIcon}

View File

@ -147,6 +147,7 @@ export default function ISDCodeDropdown(props: ISDCodeDropdownProps) {
} }
return ( return (
<Dropdown <Dropdown
closeOnSpace={false}
containerClassName="country-type-filter" containerClassName="country-type-filter"
dropdownHeight="139px" dropdownHeight="139px"
dropdownTriggerIcon={dropdownTrigger} dropdownTriggerIcon={dropdownTrigger}