Repository navigation
MUI x DSFR : Checkbox @mui disabled = bug d'affichage #369
Description
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.
Metadata
Metadata
Assignees
Labels
No labels
Activity
enguerranws commentedon Mar 3, 2025
@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.
PlugNPush commentedon May 14, 2025
@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>PlugNPush commentedon May 14, 2025
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.
PlugNPush commentedon May 14, 2025
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
PlugNPush commentedon May 14, 2025
En fix temporaire :