native option on select field as workaround

apps/dev/content/primary/fields/examples/rich-text-fields.json

@@ -26,6 +26,16 @@
         }
       ]
     },
+    {
+      "_type": "Inner",
+      "_id": "35NHj0CoZZwsTXBfRwm1vB3ZsQR",
+      "checkbox1": true,
+      "checkbox2": false,
+      "selectNative": "optionC",
+      "select": "optionB",
+      "title": "",
+      "content": []
+    },
     {
       "_type": "paragraph",
       "textAlign": "left",
@@ -48,6 +58,15 @@
           ]
         }
       ]
+    },
+    {
+      "_type": "Inner",
+      "_id": "35NHkXfiMBpbK5x09C4bD2pZOLn",
+      "checkbox2": true,
+      "selectNative": "optionB",
+      "select": "optionB",
+      "title": "Test",
+      "content": []
     }
   ],
   "metadata": {
@@ -59,4 +78,4 @@
       "description": ""
     }
   }
-}
+}

apps/dev/src/schema/example/RichTextFields.tsx

@@ -25,6 +25,21 @@ export const RichTextFields = Config.document('Rich text fields', {
           fields: {
             checkbox1: Field.check('Checkbox 1'),
             checkbox2: Field.check('Checkbox 2'),
+            selectNative: Field.select('Select', {
+              options: {
+                optionA: 'Option A',
+                optionB: 'Option B',
+                optionC: 'Option C'
+              }
+            }),
+            select: Field.select('Select (native)', {
+              native: true,
+              options: {
+                optionA: 'Option A',
+                optionB: 'Option B',
+                optionC: 'Option C'
+              }
+            }),
             title: Field.text('Title'),
             content: Field.richText('Inner rich text', {
               searchable: true

apps/dev/src/schema/example/index.ts

@@ -11,5 +11,5 @@ export * from './LinkFields'
 export * from './ListFields'
 export * from './QuizExample'
 export * from './RichTextFields'
-export * from './TabsExample'
 export * from './SharedFields'
+export * from './TabsExample'

src/field/select/SelectField.module.scss

@@ -1,3 +1,25 @@
+.native {
+  select {
+    cursor: pointer;
+    // appearance: none;
+    background: transparent;
+
+    border-radius: var(--alinea-border-radius);
+    background: var(--alinea-background);
+    border: 1px solid var(--alinea-outline);
+    box-shadow: var(--alinea-fields-shadow);
+    padding: 9px 0 9px 14px;
+    text-align: left;
+    line-height: 1.5;
+    width: 100%;
+
+    &:focus-within {
+      background: var(--alinea-fields-selected);
+      outline: 2px solid var(--alinea-fields-focus);
+    }
+  }
+}
+
 .root {
   position: relative;
   background: var(--alinea-fields);

src/field/select/SelectField.ts

@@ -16,6 +16,8 @@ export interface SelectConfig<Key> extends FieldOptions<Key> {
   inline?: boolean
   /** Choose a custom placeholder (eg. 'Select an option')  */
   placeholder?: string
+  /** Display as a native select, with limited styling (usable to prevent issues in edge cases) */
+  native?: boolean
 }
 
 export interface SelectOptions<Key extends string> extends SelectConfig<Key> {

src/field/select/SelectField.view.tsx

@@ -29,6 +29,7 @@ export function SelectInput<Key extends string>({
   field
 }: SelectInputProps<Key>) {
   const {value = null, mutator, label, options, error} = useField(field)
+
   const {readOnly} = options
   const items = options.options as Record<string, string>
   const {x, y, reference, floating, refs, strategy} = useFloating({
@@ -49,6 +50,29 @@ export function SelectInput<Key extends string>({
     ]
   })
 
+  if (options.native) {
+    return (
+      <InputLabel {...options} error={error} icon={IcRoundArrowDropDownCircle}>
+        <div className={styles.native({readOnly})}>
+          <select
+            value={value || ''}
+            onChange={e => {
+              console.log(e.target.value)
+              mutator(e.target.value as Key)
+            }}
+          >
+            <option value=""></option>
+            {Object.keys(items).map(key => (
+              <option key={key} value={key}>
+                {items[key]}
+              </option>
+            ))}
+          </select>
+        </div>
+      </InputLabel>
+    )
+  }
+
   return (
     <InputLabel {...options} error={error} icon={IcRoundArrowDropDownCircle}>
       <div className={styles.root({readOnly})}>