📖 Help: Deaktivierte Schalter scheinen beim dialog-Tag durch

[deleonio]

Wenn man statt der Modal-Komponente den HTML dialog-Tag verwendet, kann es passieren, dass deaktivierte Elemente im Hintergrund durch den Dialog sichtbar sind.

[deleonio]

Hier haben wir das nachgestellt: https://stackblitz.com/edit/vitejs-vite-qjbem3?file=src%2FApp.tsx,src%2Fmain.ts

Workaround / Lösung ist: Den Dialog im DOM möglichst am Ende zu verwenden. So scheinen die deaktivierten Elemente nicht mehr durch den Dialog.

[deleonio]

Known Issue:

• Browser-Bug in die Liste aufnehmen: https://github.com/public-ui/kolibri/blob/develop/KNOWN_ISSUES.md
• Bitte auf das Reproduktionsbeispiel verlinken: https://stackblitz.com/edit/vitejs-vite-qjbem3?file=src%2FApp.tsx
• Mal mit Firefox anschauen.
• Bitte mal schauen, ob wir ein Ticket bei Chromium oder Firefox dazu finden.
• Inhalt
  • Wenn ein dialog-Tag vor button's im DOM verwendet wird und Schalter "unterhalb" des Dialogs sind, dann scheinen diese im deaktivierten Zustand durch das darüberliegende Dialog durch.

[sdvg]

Ich habe mal ein minimales Beispiel ohne KoliBri gebaut, hier kann ich das Problem nicht reproduzieren: https://codepen.io/sdvg/pen/yLrJYzj

[sdvg]

Problemursache: opacity auf deaktivierten Buttons: https://stackoverflow.com/a/11742116

[sdvg]

Praktisch ist hier keine Änderung an KoliBri notwendig, es reicht, dem <dialog> einen z-index von mindestens 1 zuzuweisen.
Angepasstes Beispiel: https://stackblitz.com/edit/vitejs-vite-qbm5eb?file=src%2FApp.tsx,package.json

[sdvg]

@deleonio Hier gibt es kein PR, weil der Bugfix ausschließlich im Projekt bzw. auf Stackblitz stattfindet. Ist die Lösung so i.O. und können wir das Ticket schließen?

[deleonio]

@Chrisdo82 Es muss der z-index am Dialog gesetzt werden.