Inconsistent state change when browser tab is switched in `useSelect`

[eszthoff]

• downshift version: 6.0.5
• node version: latest
• npm (or yarn) version: latest

Relevant code or config
Simple implementation of a Select component using useSelect hook. Behaviour is visible in your example implementation

What you did:

• Open the Select dropdown
• Switch back and forth with another browser tab

What happened:

The Select dropdown stays open / collapses inconsistently, meaning sometimes it stays open and sometimes is closes

Reproduction repository:

https://codesandbox.io/s/useselect-usage-forked-cikep

Problem description:

Inconsistent state change in useSelect when switching browser tabs

Suggested solution:

I don't think there is a clear industry standard for this behaviour. As far as I tested useCombobox does collapse on tab switch, so maybe that's will be good here too. If not too difficult, could create a prop to manipulate it.

[tzlilal]

@silviuaavram The problem is caused by the shouldBlurRef in attempt to prevent menu blur after selection.
Here:

	if (environment.document.activeElement === menuRef.current) {
			// istanbul ignore else
			if (toggleButtonRef.current) {
				shouldBlurRef.current = false;
				toggleButtonRef.current.focus();
			}
		}

and here:

			// if the blur was a result of selection, we don't trigger this action.
				if (shouldBlurRef.current === false) {
					shouldBlurRef.current = true;
					return;
				}

the behaviour could be achieved using this state reducer:

function stateReducer(state, actionAndChanges) {
	const { type, changes } = actionAndChanges;
	switch (type) {
		case useSelect.stateChangeTypes.ItemClick:
			const { index } = actionAndChanges;
			return {
				isOpen: true,
				selectedItem: items[index],
				highlightedIndex: index,
			};
		default:
			return changes;
	}
}

I think it's best to let the user decide this behaviour... WDUT?

[silviuaavram]

Let me look at this further and I will get back to you. Thank you for reporting!

[silviuaavram]

@tzlilal that stateReducer is making the menu stay open on selection by click. Why is it related to the blur issue on tab switch?

[silviuaavram]

Looking a bit more, seems that the blur on the menu gets triggered the first them, then one the second time it will not get triggered, then on the third time it will get triggered, and so on.

Our handlers seem to be correct, maybe it's not something related to useSelect. If you can look deeper into the problem I can leave this issue open. Thank you very much!

[ItayElgazar]

The issue is still there (using useCombobox). any workarounds?