Hacktoberfest 2026 : les issues que les mainteneurs ont marquées pour octobre, ouvertes et accessibles aux débutants. Parcourir les issues Hacktoberfest

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

Ouverte
  • Quelque chose ne va pas ?
#9,027 1 commentaire 0 réactions 0 personnes assignées Voir sur GitHub

Les mainteneurs répondent en général sous 1 jour

Personne n'a encore pris cette issue.

Évaluation

Difficulté
3/5
Temps estimé
1-2 jours
Accessibilité débutants
56/100
Type d'issue
Bug
Clarté
Plutôt claire
Activité
Active
Stack technique
react, typescript
Domaine
frontend

Piste de recherche

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.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Description

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.
Langage dominant
TypeScript
Étoiles
541
Forks
114
Merge moyen
20 h 22 min
PR mergées (30 j)
78

Préparer son environnement

Par où commencer

  1. Lisez l'issue en entier, puis le guide de contribution du projet.
  2. Signalez en commentaire que vous la prenez — cela évite que deux personnes fassent le même travail.
  3. Forkez le dépôt et travaillez sur une branche.
  4. Ouvrez une pull request qui référence le numéro de l'issue.

Autres issues de UI5/webcomponents-react

Toutes les issues de UI5/webcomponents-react

Issues similaires

Plus d'issues TypeScript

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.