codegouvfr
MUI x DSFR : Checkbox @mui disabled = bug d'affichage
Bonjour,
Je ne sais pas trop si cette issue est un problème de React DSFR ou du DSFR, mais lorsque j'utilise la Checkbox d'MUI et que je définis disabled={true}, la checkbox obtient une sorte d'ombre deux fois plus grande qu'elle-même par dessus, ce qui n'est pas agréable pour l'utilisateur.
Le problème ne se produit pas avec une simple balise input HTML, donc je suppose qu'il y a un problème avec le provider MUI du DSFR.
Illustration :
<input type="checkbox" checked={true} disabled={false}/> <Checkbox checked={true} disabled={false} />
<input type="checkbox" checked={true} disabled={true}/> <Checkbox checked={true} disabled={true} />
Le CSS qui affecte MUI est, d'après mon navigateur : inline:2218
/**
* Override de l'opacité chrome sur un élément disabled
*/
a:not([href]),
button:disabled,
input:disabled,
input[type=checkbox]:disabled,
input[type=checkbox]:disabled + label,
input[type=radio]:disabled,
input[type=radio]:disabled + label,
textarea:disabled,
video:not([href]),
audio:not([href]) {
opacity: 1;
color: var(--text-disabled-grey);
}
Merci pour votre aide.
@PlugNPush est-ce que tu peux fournir le code HTML de ce qui enrobe l'input ?
La grosse différence, c'est que le composant Checkbox retourne toute une structure html (fieldset, legend, etc), pas juste un input. Donc selon ce qu'il y a autour, certaines règles CSS peuvent venir parasiter l'affichage que tu souhaites.
@enguerranws Hello, désolé pour le retard, je n'ai pas utilisé de checkbox désactivée durant une longue période, Le problème est toujours présent aujourd'hui.
<span class="MuiButtonBase-root MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeMedium Mui-disabled PrivateSwitchBase-root MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeMedium Mui-disabled MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeMedium css-1gjqamo-MuiButtonBase-root-MuiCheckbox-root" tabindex="-1" aria-disabled="true"><input data-indeterminate="false" class="PrivateSwitchBase-input css-j8yymo" type="checkbox" disabled=""><svg class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1dhtbeh-MuiSvgIcon-root" focusable="false" aria-hidden="true" viewBox="0 0 24 24" data-testid="CheckBoxOutlineBlankIcon"><path d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"></path></svg></span>
Comme indiqué précédemment, la règle ci-jointe est responsable de l'effet indésirable. En retirant opacity: 1; le problème disparait.
En le mettant à 0.5, on voit le grand carré (qui ne devrait pas être visible) supperposé au petit carré
En mode activé, la zone concerneé sert à afficher un halo autour de la checkbox
En fix temporaire :
.MuiCheckbox-root .PrivateSwitchBase-input {
opacity: 0 !important;
}