ComboBox - Clicking outside the menu is selecting an item in the menu

[eyao06]

🐛 Bug Report

After typing in anything in the ComboBox, as long as it shrinks the menu a bit, and while still not having anything selected, click anywhere below the menu (anywhere that was within the previous menu height)
The field will clear, then the full menu of items will reappear and then the item in the area you clicked will be selected

i noticed this occurs when i add the loadingState prop to the ComboBox

Screen.Recording.2021-07-29.at.6.12.00.PM.mov

🤔 Expected Behavior

• Menu will close without it re-opening

😯 Current Behavior

• On mouse down Menu closes > Field clears > Menu re-opens > On mouse up, if mouse cursor is within the menu space, an item will be selected

🔦 Context

• Steps to Reproduce

1. In the ComboBox input field, type in anything, we just want to filter the options in the menu so the menu height reduces
2. Do not select anything in the menu
3. Hover you mouse to anywhere below the menu (the area where the menu use to cover before it was filtered)
4. Click there
5. Immediately the ComboBox field will clear and the menu will undo the filter, and the item where the click was, will be selected

💻 Code Sample

import React from "react";
import { Provider, defaultTheme, ComboBox, Item } from "@adobe/react-spectrum";
import "./styles.css";

let options = [
  { id: 1, name: 'Aerospace' },
  { id: 2, name: 'Mechanical' },
  { id: 3, name: 'Civil' },
  { id: 4, name: 'Biomedical' },
  { id: 5, name: 'Nuclear' },
  { id: 6, name: 'Industrial' },
  { id: 7, name: 'Chemical' },
  { id: 8, name: 'Agricultural' },
  { id: 9, name: 'Electrical' },
];

export default function App() {
  return (
    <Provider theme={defaultTheme}>
        <ComboBox
          label='Pick a engineering major'
          defaultItems={ options }
          loadingState>
          {(item) => <Item>{item.name}</Item>}
        </ComboBox>
    </Provider>
  );
}

[LFDanLu]

Confirmed this is an issue, perhaps we can try to prevent selection while the menu is transitioning

[diegocasmo]

This seems to be happening because the combo box input value is set to an empty string because the selectedKey is null. This results in filtering the collection and momentarily rendering all options.

I was able to replicate it in the Storybook examples:

Click to see `.gif` Storybook example

The issue appears to happen in the commitSelection function (packages/@react/stately/combobox/src/useComboBoxState.ts), in the else part of it:

  let commitSelection = () => {
    // If multiple things are controlled, call onSelectionChange
    if (props.selectedKey !== undefined && props.inputValue !== undefined) {
      props.onSelectionChange(selectedKey);

      // Stop menu from reopening from useEffect
      let itemText = collection.getItem(selectedKey)?.textValue ?? '';
      lastValue.current = itemText;
      triggerState.close();
    } else {
      // If only a single aspect of combobox is controlled, reset input value and close menu for the user
      resetInputValue();
      triggerState.close();
    }
  };

I did try to fix it by listening (with useEffect) to changes of triggerState.isOpen (to "wait" until it's closed and selectedKey is null) and only then reset the input value with resetInputValue(), but for some reason that didn't work (it still momentarily rendered the "full" collection) 😞.

[LFDanLu]

Team discussed this, we'll see about preventing the selection of the item when the menu is closing (perhaps via ignoring selection changes if isOpen is false). The menu flash issue is harder to fix so we won't include that in the work here.