You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
I've been chasing an issue that is very similar to this #1262 that is happening when isOpen is in controlled mode. After some research I found this code:
This if condition prevents the onBlur to be triggered on the input when the combobox is being closed via another component behaviour (I'm using floating-ui to control the prop). So when I click outside, floating-ui updates the prop and isOpen set to false so the combobox menu is closed but the blur event is never fired. We rely on the state reducer to change the state in the blur phase, so this part got broken. The fix would be to remove the if condition completely since it's not necessary in this case I think.
I think that useSelect uses the same code so probably it should be done also.
I'm not sure if it's worth creating a repro case but I'm happy to do so if you think it's necessary. I'm also happy to submit a PR if that would help.
Here is the diff that solved my problem:
diff --git a/node_modules/downshift/dist/downshift.cjs.js b/node_modules/downshift/dist/downshift.cjs.js
index 690d8ed..9c32705 100644
--- a/node_modules/downshift/dist/downshift.cjs.js+++ b/node_modules/downshift/dist/downshift.cjs.js@@ -3122,13 +3122,11 @@ function useCombobox(userProps) {
}
});
var mouseAndTouchTrackers = useMouseAndTouchTracker(environment, [toggleButtonRef, menuRef, inputRef], React.useCallback(function handleBlur() {
- if (latest.current.state.isOpen) {
dispatch({
type: InputBlur,
selectItem: false
});
- }- }, [dispatch, latest]));+ }, [dispatch]));
var setGetterPropCallInfo = useGetterPropsCalledChecker('getInputProps', 'getMenuProps');
// Reset itemRefs on close.
React.useEffect(function () {
diff --git a/node_modules/downshift/dist/downshift.esm.js b/node_modules/downshift/dist/downshift.esm.js
index ac35a55..0c3dc5c 100644
--- a/node_modules/downshift/dist/downshift.esm.js+++ b/node_modules/downshift/dist/downshift.esm.js@@ -3109,13 +3109,11 @@ function useCombobox(userProps) {
}
});
var mouseAndTouchTrackers = useMouseAndTouchTracker(environment, [toggleButtonRef, menuRef, inputRef], useCallback(function handleBlur() {
- if (latest.current.state.isOpen) {
dispatch({
type: InputBlur,
selectItem: false
});
- }- }, [dispatch, latest]));+ }, [dispatch]));
var setGetterPropCallInfo = useGetterPropsCalledChecker('getInputProps', 'getMenuProps');
// Reset itemRefs on close.
useEffect(function () {
Hi! 👋
Firstly, thanks for your work on this project! 🙂
I've been chasing an issue that is very similar to this #1262 that is happening when
isOpen
is in controlled mode. After some research I found this code:https://github.com/downshift-js/downshift/blob/59d3498faafd3c3b4832a20dab7485502ce67284/src/hooks/useCombobox/index.js#L103C13-L108
This
if
condition prevents theonBlur
to be triggered on the input when the combobox is being closed via another component behaviour (I'm using floating-ui to control the prop). So when I click outside, floating-ui updates the prop andisOpen
set to false so the combobox menu is closed but the blur event is never fired. We rely on the state reducer to change the state in the blur phase, so this part got broken. The fix would be to remove theif
condition completely since it's not necessary in this case I think.I think that
useSelect
uses the same code so probably it should be done also.I'm not sure if it's worth creating a repro case but I'm happy to do so if you think it's necessary. I'm also happy to submit a PR if that would help.
Here is the diff that solved my problem:
This issue body was partially generated by patch-package.
The text was updated successfully, but these errors were encountered: