fix(@react-aria/select): avoid empty option in hidden select markup (adobe#9677)

Co-authored-by: Robert Snow <rsnow@adobe.com>

Author: sonsu-lee

packages/@react-aria/select/src/HiddenSelect.tsx

@@ -157,7 +157,7 @@ export function HiddenSelect<T, M extends SelectionMode = 'single'>(props: Hidde
         <label>
           {label}
           <select {...selectProps} ref={selectRef}>
-            <option />
+            <option value="" label={'\u00A0'}>{'\u00A0'}</option>
             {[...state.collection.getKeys()].map(key => {
               let item = state.collection.getItem(key);
               if (item && item.type === 'item') {

packages/@react-aria/select/test/HiddenSelect.test.tsx

@@ -84,6 +84,36 @@ describe('<HiddenSelect />', () => {
     expect(onSelectionChange).toBeCalledWith('5');
   });
 
+  it('should include a non-empty placeholder option for native select markup', () => {
+    render(
+      <HiddenSelectExample
+        label="select"
+        items={makeItems(5)} />
+    );
+
+    let select = screen.getByLabelText('select');
+    let firstOption = select.querySelector('option')!;
+
+    expect(firstOption).toHaveAttribute('value', '');
+    expect(firstOption).toHaveAttribute('label', '\u00A0');
+  });
+
+  it('should submit an empty string when no value is selected', () => {
+    let formRef = React.createRef<HTMLFormElement>();
+    render(
+      <form ref={formRef}>
+        <HiddenSelectExample
+          hiddenProps={{
+            name: 'select'
+          }}
+          items={makeItems(5)} />
+      </form>
+    );
+
+    let formData = new FormData(formRef.current!);
+    expect(formData.get('select')).toEqual('');
+  });
+
   it('should always add a data attribute data-a11y-ignore="aria-hidden-focus"', () => {
     render(
       <HiddenSelectExample items={makeItems(5)} />