diff --git a/.changeset/eighty-teachers-collect.md b/.changeset/eighty-teachers-collect.md new file mode 100644 index 0000000..cfaf7b0 --- /dev/null +++ b/.changeset/eighty-teachers-collect.md @@ -0,0 +1,5 @@ +--- +"@openfun/cunningham-react": patch +--- + +fix multi select menu opening diff --git a/packages/react/src/components/Forms/Select/mono-common.tsx b/packages/react/src/components/Forms/Select/mono-common.tsx index 8f32447..5ce5d31 100644 --- a/packages/react/src/components/Forms/Select/mono-common.tsx +++ b/packages/react/src/components/Forms/Select/mono-common.tsx @@ -87,7 +87,6 @@ export const SelectMonoAux = ({ }: SelectAuxProps) => { const { t } = useCunningham(); const labelProps = downshiftReturn.getLabelProps(); - return (
{ const { t } = useCunningham(); const labelProps = props.downshiftReturn.getLabelProps(); + + // We need to remove onBlur from toggleButtonProps because it triggers a menu closing each time + // we tick a checkbox using the monoline style. + const { onBlur, ...toggleProps } = props.downshiftReturn.toggleButtonProps; return (
{ props.downshiftReturn.isOpen && !props.disabled, })} {...props.downshiftReturn.wrapperProps} + {...toggleProps} > {props.selectedItems.map((selectedItem, index) => ( { } disabled={props.disabled} - {...props.downshiftReturn.toggleButtonProps} />
diff --git a/packages/react/src/components/Forms/Select/multi-searchable.tsx b/packages/react/src/components/Forms/Select/multi-searchable.tsx index 98b3af0..16587da 100644 --- a/packages/react/src/components/Forms/Select/multi-searchable.tsx +++ b/packages/react/src/components/Forms/Select/multi-searchable.tsx @@ -155,6 +155,7 @@ export const SelectMultiSearchable = forwardRef( {...inputProps} onFocus={() => { setHasInputFocused(true); + downshiftReturn.openMenu(); }} onBlur={() => { setHasInputFocused(false); diff --git a/packages/react/src/components/Forms/Select/multi-simple.tsx b/packages/react/src/components/Forms/Select/multi-simple.tsx index b57d37c..ff901c4 100644 --- a/packages/react/src/components/Forms/Select/multi-simple.tsx +++ b/packages/react/src/components/Forms/Select/multi-simple.tsx @@ -115,13 +115,6 @@ export const SelectMultiSimple = forwardRef( menuOptionsStyle={props.monoline ? "checkbox" : "plain"} downshiftReturn={{ ...downshiftReturn, - wrapperProps: { - onClick: () => { - if (!props.disabled) { - downshiftReturn.toggleMenu(); - } - }, - }, toggleButtonProps: downshiftReturn.getToggleButtonProps({ ...useMultipleSelectionReturn.getDropdownProps({ preventKeyAction: downshiftReturn.isOpen, diff --git a/packages/react/src/components/Forms/Select/multi.spec.tsx b/packages/react/src/components/Forms/Select/multi.spec.tsx index 7345cce..8ee97b5 100644 --- a/packages/react/src/components/Forms/Select/multi.spec.tsx +++ b/packages/react/src/components/Forms/Select/multi.spec.tsx @@ -781,8 +781,11 @@ describe("", () => { // Focus the select. await user.click(input); expectMenuToBeOpen(menu); - expect(document.activeElement?.className).toContain("c__button"); + expect(document.activeElement?.className).toContain("c__select__wrapper"); // Blur the select. ref.current?.blur(); @@ -1041,8 +1044,6 @@ describe("