useCombobox selects highlightedIndex on browser tab change

[aliceHendicott]

• downshift version: 7.2.0
• node version: 16.19
• npm (or yarn) version: 1.22.10 (yarn)

What you did:

As decided in #1010, InputBlur action should return selectedItem only from Tab/Shift+Tab and not from clicking outside. As of v6, this change was made. However, if your click outside is to change browser tab, the current highlightedIndex is selected when returning to the page.

To reproduce (possible through the docs site):

1. Open menu via toggle button
2. Move mouse outside of menu
3. Use keyboard to highlight an item (ie: press down arrow)
4. Click another browser tab to switch tab (outside of menu)
5. Return to the tab with downshift, the highlighted item is now selected

Performing the same behaviour on the accessible example within the accessibility guidelines does not select the highlighted item.

Screen.Recording.2023-02-17.at.9.26.41.am.mov

Reproduction repository:

https://codesandbox.io/s/downshift-basic-example-7edw3k

[silviuaavram]

It appears to happen only on tab switch. Maybe the condition in inputHandleBlur needs to be updated. Requires investigation.

Thank you for reporting this! It's quite a corner case, as it involves both mouse and keyboard + the tab switch. I really cannot imagine this scenario occurring, but if we can fix it, then we should!

[aliceHendicott]

Thanks @silviuaavram! Agree it's a bit of an edge case but would be good to solve if possible.

I've done some more investigating into this issue and the problem is that the mousedown and mouseup events don't register when the click is to switch tabs. So the mouseAndTouchTrackersRef.current.isMouseDown is never true for this scenario.

A potential solution could be to also rely on the event.relativeTarget in the inputBlurHandler. In a blur event, this is set to the element receiving focus which is simply null when switching tabs because focus is no longer in that window.

This change could look something like this:
Link to handler in useCombobox

- const inputHandleBlur = () => {
+ const inputHandleBlur = event => {
   if (
    latestState.isOpen &&
    !mouseAndTouchTrackersRef.current.isMouseDown
   ) {
     dispatch({
       type: stateChangeTypes.InputBlur,
-      selectItem: true,
+      selectItem: event.relativeTarget !== null,
    })
  }
}

Keen to get your thoughts on this change, happy to help out with a PR 😄

[Drewberrysteph]

Having the same issue, @aliceHendicott I think you confused two things.
relativeTarget returns undefined when there is a tab change or clicking outside the option.
relatedTarget returns null when there is a tab change or clicking outside the option.

Should be

-  event.relativeTarget !== null
+  event.relativeTarget !== undefined

or what you are looking for

-  event.relativeTarget !== null
+  event.relatedTarget !== null

[silviuaavram]

Thank you for looking into this! @aliceHendicott @Drewberrysteph anyone up to fix this in a PR? useSelect also selects on ToggleButtonBlur, so it should be changed as well. Also, I guess we can also unit test these changes.

[aliceHendicott]

Thanks @Drewberrysteph! Must have been testing with relatedTarget thinking it was relativeTarget. Thanks for clarifying the difference 🙌

@silviuaavram happy to do up a PR for this one 😄 I'm not sure the change is needed in useSelect as well since the expected behaviour for that one is slightly different considering there isn't a text input.

[silviuaavram]

Thank you for the PR! Looking forward to merging it!

[silviuaavram]

@all-contributors please add @aliceHendicott for code, bug

[allcontributors]

@silviuaavram

I've put up a pull request to add @aliceHendicott! 🎉

[github-actions]

🎉 This issue has been resolved in version 7.4.1 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀