Add readonly class to SelectField

[niklasdahlheimer]

I need to add custom text styling to readonly fields. For TextFields this works flawlessly with a selector like

.ui.input input[readonly]{
   color: darkgrey;
}

because the readonly attribute is forwarded directly to the <input>element. However, for SelectFields the inner HTML element is <select>. You probably did not forward it here because, according to the specification <select> elements do not accept the readonly attribute.

To respect the specification but still have an anchor for readonly select fields and support css selecting, it would be great if you could add a conditional readonly class to the outer div, similar to the disabled class, here:

uniforms/packages/uniforms-semantic/src/SelectField.tsx

Line 51 in f19cdcb

className={classnames({ disabled, error, required }, className, 'field')}

PS: I only could speak for the semantic-ui package here, maybe this affects other packages too.

[radekmie]

Hey @niklasdahlheimer and thanks for the suggestion! Actually, SelectField is not the only one that doesn't have that - the same goes for all sorts of checkboxes and radio inputs. I'd rather add a readonly attribute rather than a class, but I think it's enough for your use case (and this case in general).

[radekmie]

Update: it looks like some themes (e.g., Bootstrap) have custom styles for readonly <select>s, so it actually affects more themes. Pull requests welcome, as usual!