Matrix/element-call-Github
1
0
Fork 0
mirror of https://github.com/vector-im/element-call.git synced 2026-08-17 20:39:19 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
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>
This commit is contained in:
Ryan Emmick
2026-02-11 02:55:44 -06:00
parent 342b61f633
commit bc38d15b6d
2 changed files with 36 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
src/settings/SettingsModal.module.css
View File

@@ -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);
}

33
src/settings/SettingsModal.tsx
View File

@@ -138,14 +138,12 @@ export const SettingsModal: FC<Props> = ({
</FieldRow>
{advancedEnabled && (
<>
<FieldRow>
<InputField
<div className={styles.volumeSlider}>
<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>
</FieldRow>
</select>
</div>
<div className={styles.volumeSlider}>
<label>
{t("settings.screen_share_framerate_label", "Framerate")}
@@ -188,20 +186,23 @@ export const SettingsModal: FC<Props> = ({
}
/>
</div>
<FieldRow>
<InputField
<div className={styles.volumeSlider}>
<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>
</FieldRow>
</select>
</div>
</>
)}
</>