Prevent allowCustomValue ComboBox from removing selected key on blur if inputValue wasn't changed (#1541)

Author: LFDanLu

packages/@react-spectrum/combobox/test/ComboBox.test.js

@@ -1463,6 +1463,35 @@ describe('ComboBox', function () {
       expect(() => getByRole('listbox')).toThrow();
     });
 
+    it('retains selected key on blur if input value matches', function () {
+      let {getByRole} = render(
+        <Provider theme={theme}>
+          <ComboBox label="Test" allowsCustomValue selectedKey="2" onOpenChange={onOpenChange} onSelectionChange={onSelectionChange}>
+            <Item key="1">Bulbasaur</Item>
+            <Item key="2">Squirtle</Item>
+            <Item key="3">Charmander</Item>
+          </ComboBox>
+        </Provider>
+      );
+
+      let combobox = getByRole('combobox');
+      expect(onSelectionChange).not.toHaveBeenCalled();
+
+      act(() => {
+        userEvent.click(combobox);
+        jest.runAllTimers();
+      });
+
+      expect(document.activeElement).toBe(combobox);
+
+      act(() => {
+        combobox.blur();
+        jest.runAllTimers();
+      });
+
+      expect(onSelectionChange).not.toHaveBeenCalled();
+    });
+
     it('clears the input field if value doesn\'t match a combobox option and no item is focused (menuTrigger=manual case)', function () {
       let {getByRole, getAllByRole} = render(
         <Provider theme={theme}>

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

@@ -217,7 +217,8 @@ export function useComboBoxState<T extends object>(props: ComboBoxStateProps<T>)
         open();
       }
     } else if (shouldCloseOnBlur) {
-      if (allowsCustomValue) {
+      let itemText = collection.getItem(selectedKey)?.textValue ?? '';
+      if (allowsCustomValue && inputValue !== itemText) {
         commitCustomValue();
       } else {
         resetInputValue();