fix combobox placeholder warning

Author: LFDanLu

packages/@react-spectrum/s2/src/placeholder-utils.tsx

@@ -23,8 +23,17 @@ export function usePlaceholderWarning(placeholder: string | undefined, component
   });
 
   useEffect(() => {
-    checkPlaceholder(inputRef.current);
-  }, [checkPlaceholder, inputRef]);
+    let timer;
+    if (componentType === 'ComboBox') {
+      timer = setTimeout(() => {
+        checkPlaceholder(inputRef.current);
+      }, 50);
+    } else {
+      checkPlaceholder(inputRef.current);
+    }
+
+    return () => clearTimeout(timer);
+  }, [checkPlaceholder, inputRef, componentType]);
 
   useEvent(inputRef, 'blur', (e) => checkPlaceholder(e.target as HTMLInputElement));
 }

packages/@react-spectrum/s2/stories/ComboBox.stories.tsx

@@ -36,7 +36,7 @@ const meta: Meta<typeof ComboBox<any>> = {
     placeholder: {control: {type: 'text'}}
   },
   args: {
-    // placeholder: 'Select a value'
+    placeholder: 'Select a value'
   },
   title: 'ComboBox'
 };
@@ -46,7 +46,7 @@ type Story = StoryObj<typeof ComboBox<any>>;
 
 export const Example: Story = {
   render: (args: ComboBoxProps<any>) => (
-    <ComboBox selectedKey="1">
+    <ComboBox {...args}>
       <ComboBoxItem id="1">Chocolate</ComboBoxItem>
       <ComboBoxItem>Mint</ComboBoxItem>
       <ComboBoxItem>Strawberry</ComboBoxItem>

packages/@react-spectrum/s2/test/Combobox.test.tsx

@@ -218,6 +218,9 @@ describe('Combobox', () => {
     let {rerender} = render(
       <DynamicCombobox items={items} />
     );
+    // Since Combobox takes multiple renders to populate its input value if a selected key is provided
+    // we have a delay for the placeholder warning
+    act(() => {jest.runAllTimers();});
 
     expect(warnSpy).toHaveBeenCalledWith('Your ComboBox is empty and not focused but doesn\'t have a placeholder. Please add one.');
     warnSpy.mockClear();