Hacktoberfest 2026: le issue che i maintainer hanno segnato per ottobre, aperte e adatte ai principianti. Sfoglia le issue Hacktoberfest

VariantManagement / FilterBar: ::backdrop remains in top layer after dialog is closed, freezing the page

Aperta
  • Qualcosa non va?
#9,027 1 commento 0 reazioni 0 assegnatari Vedi su GitHub

I maintainer di solito rispondono entro 1 giorno

Nessuno ha ancora preso questa issue.

Valutazione

Difficoltà
3/5
Tempo stimato
1-2 giorni
Idoneità per principianti
56/100
Tipo di issue
Bug
Chiarezza
Abbastanza chiara
Stato di attività
Attiva
Stack tecnologico
react, typescript
Ambito
frontend

Direzione di ricerca

Start by tracing how the VariantManagement and FilterBar dialogs mount and close, then inspect the ui5-dialog cleanup path, especially disconnectedCallback and onExitDOM. Reproduce the stuck backdrop with the listed steps, including React StrictMode; done means closing or unmounting the dialog removes the backdrop and leaves the page interactive.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

author action
Describe the bug

When a ui5-dialog inside VariantManagement (Save As) or FilterBar (Adapt Filters) is closed by toggling React state to false, the ::backdrop pseudo-element remains stranded in the browser's top layer. The dialog disappears visually but the backdrop persists as a semi-transparent black overlay blocking all pointer events. Only pressing Escape or refreshing the page recovers it.
(React version: 18.2.0)

Isolated Example

No response

Reproduction steps

VariantManagement:

  1. Render a component with at least one variant item
  2. Click the dropdown arrow to open the variant menu
  3. Click "Save As" to open the Save As dialog
  4. Enter a name and click Save
  5. The dialog closes — but the ::backdrop remains and the page is unresponsive

FilterBar:

  1. Render a with at least one
  2. Click the "Adapt Filters" button — the FilterDialog opens
  3. Click Save (or Cancel)
  4. The dialog closes — but the ::backdrop remains and the page is unresponsive

Note: With React 18 StrictMode enabled, the backdrop can get stuck on the very first open of either dialog, before any save action, due to the mount → unmount → remount double-cycle triggering disconnectedCallback without hidePopover().

Root cause observed in source:
Both components close dialogs by setting React state to false (setSaveAsDialogOpen(false) / setDialogOpen(false)), which unmounts the ui5-dialog directly. This triggers disconnectedCallback → onExitDOM, but onExitDOM never calls hidePopover(). The ::backdrop added by showPopover() on mount has no corresponding cleanup on unmount.

Expected Behaviour

When ui5-dialog is unmounted or closed, the ::backdrop is removed from the browser top layer and the page remains fully interactive.

Screenshots or Videos
Image
UI5 Web Components for React Version

2.24.1

UI5 Web Components Version

2.24.0

Browser

Chrome, Safari, Firefox

Operating System

macOS

Additional Context

We attempted a workaround of explicitly calling Reflect.set(dialogElement, 'open', false) before the React state update that triggers the unmount, to force closePopup() while isConnected is still true. This did not consistently resolve the issue.

Relevant log output
Organization

No response

Declaration
  • I’m not disclosing any internal or sensitive information.
Lingua principale
TypeScript
Stelle
541
Fork
114
Merge medio
21h 40m
PR unite (30g)
87

Preparare l'ambiente

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di UI5/webcomponents-react

Tutte le issue di UI5/webcomponents-react

Issue simili

Altre issue su TypeScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.