fix: replace InputField type="select" with native select elements

InputField only supports input/textarea, not select. Passing option
children caused React to crash rendering children inside a void input.

Signed-off-by: Ryan Emmick <ryanemmick4@gmail.com>

src/settings/SettingsModal.module.css

@@ -33,3 +33,22 @@ Please see LICENSE in the repository root for full details.
 .volumeSlider > p {
   color: var(--cpd-color-text-secondary);
 }
+
+.volumeSlider > select {
+  display: block;
+  width: 100%;
+  padding: 8px 12px;
+  margin-top: var(--cpd-space-1x);
+  border: 1px solid var(--cpd-color-border-interactive-primary);
+  border-radius: 4px;
+  background-color: var(--cpd-color-bg-canvas-default);
+  color: var(--cpd-color-text-primary);
+  font-size: var(--font-size-body);
+  font-family: inherit;
+  cursor: pointer;
+}
+
+.volumeSlider > select:focus {
+  outline: none;
+  border-color: var(--cpd-color-text-link-external);
+}

src/settings/SettingsModal.tsx

@@ -138,14 +138,12 @@ export const SettingsModal: FC<Props> = ({
         </FieldRow>
         {advancedEnabled && (
           <>
-            <FieldRow>
+            <div className={styles.volumeSlider}>
-              <InputField
+              <label htmlFor="screenShareResolution">
+                {t("settings.screen_share_resolution_label", "Resolution")}
+              </label>
+              <select
                 id="screenShareResolution"
-                label={t(
-                  "settings.screen_share_resolution_label",
-                  "Resolution",
-                )}
-                type="select"
                 value={resolution}
                 onChange={(e): void => setResolution(e.target.value)}
               >
@@ -154,8 +152,8 @@ export const SettingsModal: FC<Props> = ({
                 <option value="1920x1080">1080p</option>
                 <option value="2560x1440">1440p</option>
                 <option value="3840x2160">4K</option>
-              </InputField>
+              </select>
-            </FieldRow>
+            </div>
             <div className={styles.volumeSlider}>
               <label>
                 {t("settings.screen_share_framerate_label", "Framerate")}
@@ -188,20 +186,23 @@ export const SettingsModal: FC<Props> = ({
                 }
               />
             </div>
-            <FieldRow>
+            <div className={styles.volumeSlider}>
-              <InputField
+              <label htmlFor="screenShareCodec">
+                {t("settings.screen_share_codec_label", "Codec")}
+              </label>
+              <select
                 id="screenShareCodec"
-                label={t("settings.screen_share_codec_label", "Codec")}
-                type="select"
                 value={codec}
-                onChange={(e): void => setCodec(e.target.value as VideoCodec)}
+                onChange={(e): void =>
+                  setCodec(e.target.value as VideoCodec)
+                }
               >
                 <option value="vp8">VP8</option>
                 <option value="vp9">VP9</option>
                 <option value="h264">H.264</option>
                 <option value="av1">AV1</option>
-              </InputField>
+              </select>
-            </FieldRow>
+            </div>
           </>
         )}
       </>