From 6ab4312cd86f906bab99e242d3f5efcbf2b5f3d2 Mon Sep 17 00:00:00 2001 From: Kyrylo Hrishchenko Date: Tue, 17 Sep 2024 12:14:55 +0300 Subject: [PATCH 1/6] fix(MultiSelect): remove unnecessary timeout to open overlay --- components/lib/multiselect/MultiSelect.js | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/components/lib/multiselect/MultiSelect.js b/components/lib/multiselect/MultiSelect.js index 42df0efaa1..259b692b8b 100644 --- a/components/lib/multiselect/MultiSelect.js +++ b/components/lib/multiselect/MultiSelect.js @@ -961,9 +961,11 @@ export const MultiSelect = React.memo( }, [inputRef, props.inputRef]); React.useEffect(() => { - setTimeout(() => { - props.overlayVisible ? show() : hide(); - }, 100); + if (props.overlayVisible) { + show(); + } else { + hide(); + } // eslint-disable-next-line react-hooks/exhaustive-deps }, [props.overlayVisible]); From b2675879697717754d099fa2dec29166e0081209 Mon Sep 17 00:00:00 2001 From: Kyrylo Hrishchenko Date: Tue, 17 Sep 2024 19:09:53 +0300 Subject: [PATCH 2/6] feat(CSSTransition): add ability to pass "appear" prop --- components/lib/csstransition/CSSTransition.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/lib/csstransition/CSSTransition.js b/components/lib/csstransition/CSSTransition.js index 9a16331b0b..003cf056f8 100644 --- a/components/lib/csstransition/CSSTransition.js +++ b/components/lib/csstransition/CSSTransition.js @@ -63,7 +63,7 @@ export const CSSTransition = React.forwardRef((inProps, ref) => { return props.in ? props.children : null; } - const immutableProps = { nodeRef: props.nodeRef, in: props.in, onEnter: onEnter, onEntering: onEntering, onEntered: onEntered, onExit: onExit, onExiting: onExiting, onExited: onExited }; + const immutableProps = { nodeRef: props.nodeRef, in: props.in, appear: props.appear, onEnter: onEnter, onEntering: onEntering, onEntered: onEntered, onExit: onExit, onExiting: onExiting, onExited: onExited }; const mutableProps = { classNames: props.classNames, timeout: props.timeout, unmountOnExit: props.unmountOnExit }; const mergedProps = { ...mutableProps, ...(props.options || {}), ...immutableProps }; From dc80f7f595aebaafb55d39af1e13712cf04bb795 Mon Sep 17 00:00:00 2001 From: Kyrylo Hrishchenko Date: Tue, 17 Sep 2024 19:10:28 +0300 Subject: [PATCH 3/6] refactor(useOverlayListener): remove duplicated useEffect --- components/lib/hooks/useOverlayListener.js | 4 ---- 1 file changed, 4 deletions(-) diff --git a/components/lib/hooks/useOverlayListener.js b/components/lib/hooks/useOverlayListener.js index c749a2960b..7529085ff3 100644 --- a/components/lib/hooks/useOverlayListener.js +++ b/components/lib/hooks/useOverlayListener.js @@ -71,10 +71,6 @@ export const useOverlayListener = ({ target, overlay, listener, when = true, typ } }, [target, overlay, when]); - React.useEffect(() => { - unbind(); - }, [when]); - useUnmountEffect(() => { unbind(); }); From 7d4d30effe0c0f215b1a3df5aff288dfa9b0ccbc Mon Sep 17 00:00:00 2001 From: Kyrylo Hrishchenko Date: Tue, 17 Sep 2024 19:13:33 +0300 Subject: [PATCH 4/6] feat(MultiSelect): enhance handling of overlayVisible prop by checking if it's a boolean value --- components/lib/multiselect/MultiSelect.js | 128 +++++++++++----------- 1 file changed, 64 insertions(+), 64 deletions(-) diff --git a/components/lib/multiselect/MultiSelect.js b/components/lib/multiselect/MultiSelect.js index 259b692b8b..0b1c02e981 100644 --- a/components/lib/multiselect/MultiSelect.js +++ b/components/lib/multiselect/MultiSelect.js @@ -285,93 +285,93 @@ export const MultiSelect = React.memo( const metaKey = event.metaKey || event.ctrlKey; switch (event.code) { - case 'ArrowUp': - if (props.inline) { - break; - } - - onArrowUpKey(event); + case 'ArrowUp': + if (props.inline) { break; + } - case 'ArrowDown': - if (props.inline) { - break; - } - - onArrowDownKey(event); + onArrowUpKey(event); + break; + case 'ArrowDown': + if (props.inline) { break; + } - case 'Space': - case 'NumpadEnter': - case 'Enter': - if (props.inline) { - break; - } - - onEnterKey(event); - break; + onArrowDownKey(event); - case 'Home': - if (props.inline) { - break; - } + break; - onHomeKey(event); - event.preventDefault(); + case 'Space': + case 'NumpadEnter': + case 'Enter': + if (props.inline) { break; + } - case 'End': - if (props.inline) { - break; - } + onEnterKey(event); + break; - onEndKey(event); - event.preventDefault(); + case 'Home': + if (props.inline) { break; + } - case 'PageDown': - onPageDownKey(event); - break; + onHomeKey(event); + event.preventDefault(); + break; - case 'PageUp': - onPageUpKey(event); + case 'End': + if (props.inline) { break; + } - case 'Escape': - if (props.inline) { - break; - } + onEndKey(event); + event.preventDefault(); + break; - hide(); - break; + case 'PageDown': + onPageDownKey(event); + break; - case 'Tab': - onTabKey(event); - break; + case 'PageUp': + onPageUpKey(event); + break; - case 'ShiftLeft': - case 'ShiftRight': - onShiftKey(event); + case 'Escape': + if (props.inline) { break; + } - default: - if (event.code === 'KeyA' && metaKey) { - const value = visibleOptions.filter((option) => isValidOption(option)).map((option) => getOptionValue(option)); + hide(); + break; - updateModel(event, value, value); + case 'Tab': + onTabKey(event); + break; - event.preventDefault(); - break; - } + case 'ShiftLeft': + case 'ShiftRight': + onShiftKey(event); + break; - if (!metaKey && ObjectUtils.isPrintableCharacter(event.key)) { - !overlayVisibleState && show(); - searchOptions(event); - event.preventDefault(); - } + default: + if (event.code === 'KeyA' && metaKey) { + const value = visibleOptions.filter((option) => isValidOption(option)).map((option) => getOptionValue(option)); + updateModel(event, value, value); + + event.preventDefault(); break; + } + + if (!metaKey && ObjectUtils.isPrintableCharacter(event.key)) { + !overlayVisibleState && show(); + searchOptions(event); + event.preventDefault(); + } + + break; } setClicked(false); @@ -961,9 +961,9 @@ export const MultiSelect = React.memo( }, [inputRef, props.inputRef]); React.useEffect(() => { - if (props.overlayVisible) { + if (props.overlayVisible === true) { show(); - } else { + } else if (props.overlayVisible === false) { hide(); } // eslint-disable-next-line react-hooks/exhaustive-deps From 64170d43c4f02c5521918ead0b90871b182d1447 Mon Sep 17 00:00:00 2001 From: Kyrylo Hrishchenko Date: Tue, 17 Sep 2024 19:15:36 +0300 Subject: [PATCH 5/6] feat(MultiSelectPanel): add `appear=true` to fix an issue with calling onEnter callback during initial mount --- components/lib/multiselect/MultiSelectPanel.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/components/lib/multiselect/MultiSelectPanel.js b/components/lib/multiselect/MultiSelectPanel.js index bc63264ca8..24d9f9b06f 100644 --- a/components/lib/multiselect/MultiSelectPanel.js +++ b/components/lib/multiselect/MultiSelectPanel.js @@ -321,11 +321,12 @@ export const MultiSelectPanel = React.memo( in: props.in, timeout: { enter: 120, exit: 100 }, options: props.transitionOptions, + appear: true, unmountOnExit: true, onEnter, onEntered, onExit: props.onExit, - onExited: props.onExited + onExited: props.onExited, }, getPTOptions('transition') ); From 193b2c34469fa945fb2ac63948c82dd34d3e9c09 Mon Sep 17 00:00:00 2001 From: Kyrylo Hrishchenko Date: Tue, 17 Sep 2024 19:16:54 +0300 Subject: [PATCH 6/6] fix: format check --- components/lib/multiselect/MultiSelect.js | 124 +++++++++--------- .../lib/multiselect/MultiSelectPanel.js | 2 +- 2 files changed, 63 insertions(+), 63 deletions(-) diff --git a/components/lib/multiselect/MultiSelect.js b/components/lib/multiselect/MultiSelect.js index 0b1c02e981..3cb367866e 100644 --- a/components/lib/multiselect/MultiSelect.js +++ b/components/lib/multiselect/MultiSelect.js @@ -285,93 +285,93 @@ export const MultiSelect = React.memo( const metaKey = event.metaKey || event.ctrlKey; switch (event.code) { - case 'ArrowUp': - if (props.inline) { - break; - } - - onArrowUpKey(event); - break; + case 'ArrowUp': + if (props.inline) { + break; + } - case 'ArrowDown': - if (props.inline) { + onArrowUpKey(event); break; - } - onArrowDownKey(event); + case 'ArrowDown': + if (props.inline) { + break; + } - break; + onArrowDownKey(event); - case 'Space': - case 'NumpadEnter': - case 'Enter': - if (props.inline) { break; - } - onEnterKey(event); - break; + case 'Space': + case 'NumpadEnter': + case 'Enter': + if (props.inline) { + break; + } - case 'Home': - if (props.inline) { + onEnterKey(event); break; - } - onHomeKey(event); - event.preventDefault(); - break; + case 'Home': + if (props.inline) { + break; + } - case 'End': - if (props.inline) { + onHomeKey(event); + event.preventDefault(); break; - } - onEndKey(event); - event.preventDefault(); - break; + case 'End': + if (props.inline) { + break; + } - case 'PageDown': - onPageDownKey(event); - break; + onEndKey(event); + event.preventDefault(); + break; - case 'PageUp': - onPageUpKey(event); - break; + case 'PageDown': + onPageDownKey(event); + break; - case 'Escape': - if (props.inline) { + case 'PageUp': + onPageUpKey(event); break; - } - hide(); - break; + case 'Escape': + if (props.inline) { + break; + } - case 'Tab': - onTabKey(event); - break; + hide(); + break; - case 'ShiftLeft': - case 'ShiftRight': - onShiftKey(event); - break; + case 'Tab': + onTabKey(event); + break; - default: - if (event.code === 'KeyA' && metaKey) { - const value = visibleOptions.filter((option) => isValidOption(option)).map((option) => getOptionValue(option)); + case 'ShiftLeft': + case 'ShiftRight': + onShiftKey(event); + break; - updateModel(event, value, value); + default: + if (event.code === 'KeyA' && metaKey) { + const value = visibleOptions.filter((option) => isValidOption(option)).map((option) => getOptionValue(option)); - event.preventDefault(); - break; - } + updateModel(event, value, value); - if (!metaKey && ObjectUtils.isPrintableCharacter(event.key)) { - !overlayVisibleState && show(); - searchOptions(event); - event.preventDefault(); - } + event.preventDefault(); + break; + } + + if (!metaKey && ObjectUtils.isPrintableCharacter(event.key)) { + !overlayVisibleState && show(); + searchOptions(event); + event.preventDefault(); + } - break; + break; } setClicked(false); diff --git a/components/lib/multiselect/MultiSelectPanel.js b/components/lib/multiselect/MultiSelectPanel.js index 24d9f9b06f..a0da4f4206 100644 --- a/components/lib/multiselect/MultiSelectPanel.js +++ b/components/lib/multiselect/MultiSelectPanel.js @@ -326,7 +326,7 @@ export const MultiSelectPanel = React.memo( onEnter, onEntered, onExit: props.onExit, - onExited: props.onExited, + onExited: props.onExited }, getPTOptions('transition') );