Prevent ComboBox item selection if menu is closing (#3999)

* Prevent key selection if user clicks on a option when the menu is transitioning out

See #2181

* fix test

Author: LFDanLu

packages/@react-stately/combobox/src/useComboBoxState.ts

@@ -306,12 +306,26 @@ export function useComboBoxState<T extends object>(props: ComboBoxStateOptions<T
     setFocusedState(isFocused);
   };
 
+  let selectionManagerProxy = useMemo(() => {
+    let proxy = new Proxy(selectionManager, {
+      get(target, prop, receiver) {
+        // If the menu is closed, don't update the selected key.
+        if (prop === 'replaceSelection' && !triggerState.isOpen) {
+          return () => {};
+        }
+        return Reflect.get(target, prop, receiver);
+      }
+    });
+
+    return proxy;
+  }, [selectionManager, triggerState.isOpen]);
+
   return {
     ...triggerState,
     toggle,
     open,
     close,
-    selectionManager,
+    selectionManager: selectionManagerProxy,
     selectedKey,
     setSelectedKey,
     disabledKeys,

packages/@react-stately/combobox/test/useComboBoxState.test.js

@@ -177,6 +177,7 @@ describe('useComboBoxState tests', function () {
       expect(result.current.selectionManager.selectedKeys).toContain('0');
       expect(result.current.selectionManager.selectedKeys).not.toContain('1');
 
+      act(() => {result.current.open();});
       act(() => result.current.selectionManager.replaceSelection('1'));
       expect(result.current.selectionManager.selectedKeys).toContain('0');
       expect(result.current.selectionManager.selectedKeys).not.toContain('1');
@@ -190,22 +191,34 @@ describe('useComboBoxState tests', function () {
       expect(result.current.selectionManager.selectedKeys).toContain('0');
       expect(result.current.selectionManager.selectedKeys).not.toContain('1');
 
+      act(() => {result.current.open();});
       act(() => result.current.selectionManager.replaceSelection('1'));
       expect(result.current.selectionManager.selectedKeys).toContain('1');
       expect(result.current.selectionManager.selectedKeys).not.toContain('0');
       expect(onSelectionChange).toHaveBeenCalledWith('1');
     });
 
-    it('supports sdefault no selection', function () {
+    it('supports default no selection', function () {
       let initialProps = {...defaultProps};
       let {result} = renderHook((props) => useComboBoxState(props), {initialProps});
       expect(result.current.selectionManager.selectionMode).toBe('single');
       expect(result.current.selectionManager.selectedKeys.size).toBe(0);
 
+      act(() => {result.current.open();});
       act(() => result.current.selectionManager.replaceSelection('1'));
       expect(result.current.selectionManager.selectedKeys).toContain('1');
       expect(result.current.selectionManager.selectedKeys).not.toContain('0');
       expect(onSelectionChange).toHaveBeenCalledWith('1');
     });
+
+    it('won\'t perform replace a selection if the combobox is closed', function () {
+      // This case covers if a option in the menu is clicked while the menu is closing
+      let initialProps = {...defaultProps};
+      let {result} = renderHook((props) => useComboBoxState(props), {initialProps});
+
+      act(() => result.current.selectionManager.replaceSelection('1'));
+      expect(result.current.selectionManager.selectedKeys.size).toEqual(0);
+      expect(onSelectionChange).toHaveBeenCalledTimes(0);
+    });
   });
 });