fix(Combobox): use stable selectedKeys to prevent infinite loop (adobe#9781)

Author: reidbarber

packages/@react-aria/combobox/src/useComboBox.ts

@@ -208,7 +208,7 @@ export function useComboBox<T, M extends SelectionMode = 'single'>(props: AriaCo
     state.setFocused(true);
   };
 
-  let valueId = useValueId([state.selectedItems, state.selectionManager.selectionMode]);
+  let valueId = useValueId([state.selectionManager.selectedKeys, state.selectionManager.selectionMode]);
   let {isInvalid, validationErrors, validationDetails} = state.displayValidation;
   let {labelProps, inputProps, descriptionProps, errorMessageProps} = useTextField({
     ...props,

packages/@react-aria/combobox/test/useComboBox.test.js

@@ -52,6 +52,22 @@ describe('useComboBox', function () {
     jest.clearAllMocks();
   });
 
+  it('should not infinite loop when children is an inline function', function () {
+    let {result} = renderHook(() => {
+      let inlineProps = {
+        items: [{id: 'a', name: 'Option A'}, {id: 'b', name: 'Option B'}],
+        children: (item) => <Item key={item.id} textValue={item.name}>{item.name}</Item>,
+        placeholder: 'Select...',
+        allowsCustomValue: true,
+        menuTrigger: 'focus'
+      };
+      let state = useComboBoxState(inlineProps);
+      return useComboBox({...inlineProps, ...props}, state);
+    });
+    expect(result.current.inputProps).toBeDefined();
+    expect(result.current.inputProps.role).toBe('combobox');
+  });
+
   it('should return default props for all the button group elements', function () {
     let {result} = renderHook(() => useComboBox(props, useComboBoxState(defaultProps)));
     let {buttonProps, inputProps, listBoxProps, labelProps} = result.current;