After a quick search in the codebase, I see two usages of the Hidden component:
- The main one: to only render on client side
<Hidden xsUp={!visible}>
<TextField
required={showAsRequired(required,
appliedUiSchemaOptions.hideRequiredAsterisk)}
id={id + '-input'}
label={label}
type={fieldType}
error={!isValid}
disabled={!enabled}
fullWidth={!appliedUiSchemaOptions.trim}
onFocus={onFocus}
onBlur={onBlur}
helperText={!isValid ? errors : showDescription ? description : null}
InputLabelProps={{ shrink: true }}
value={inputValue}
onChange={onChange}
/>
</Hidden>
- Another one: to hidde the fieldset FormControl on big screen
<Hidden xlUp={!visible}>
<FormControl component='fieldset'>
<FormGroup row>
{options.map((option: any, index: number) => {
const optionPath = Paths.compose(path, `${index}`);
const checkboxValue = data?.includes(option.value)
? option.value
: undefined;
return (
<FormControlLabel
id={option.value}
key={option.value}
control={
<MuiCheckbox
key={'checkbox-' + option.value}
isValid={isEmpty(errors)}
path={optionPath}
handleChange={(_childPath, newValue) =>
newValue
? addItem(path, option.value)
: removeItem(path, option.value)
}
data={checkboxValue}
errors={errors}
schema={schema}
visible={visible}
{...otherProps}
/>
}
label={option.label}
/>
);
})}
</FormGroup>
<FormHelperText error>
{errors}
</FormHelperText>
</FormControl>
</Hidden>
In the first case of Hidden I’m not sure it’s really usefull to preserve the actual behavior: MUI support perfectly SSR. And the actual beavior could easily reproduced by the end user.
For the second case Hidden, I really did not understand why the field should be hidden on XL screen an up… Maybe you have an explanation? Or is it a typo ?