VariantManagement / FilterBar: ::backdrop remains in top layer after dialog is closed, freezing the page
维护者通常 1 天内回复
还没有人认领这个 Issue。
评估
- 难度
- 3/5
- 预计耗时
- 1-2 天
- 新手友好度
- 56/100
- Issue 类型
- 缺陷
- 描述清晰度
- 基本清楚
- 活跃度
- 活跃
- 技术栈
- react, typescript
- 领域
- frontend
调研方向
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.
由索引模型根据 Issue 内容生成。
描述
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:
- Render a component with at least one variant item
- Click the dropdown arrow to open the variant menu
- Click "Save As" to open the Save As dialog
- Enter a name and click Save
- The dialog closes — but the
::backdropremains and the page is unresponsive
FilterBar:
- Render a with at least one
- Click the "Adapt Filters" button — the FilterDialog opens
- Click Save (or Cancel)
- The dialog closes — but the
::backdropremains 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
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.
- 主要语言
- TypeScript
- 星标
- 541
- 派生
- 114
- 平均合并
- 21 小时 40 分钟
- 30 天内合并 PR
- 87
环境准备
- 没有 Dockerfile 或 Docker Compose 文件
- 有 Pull Request 模板
- 阅读贡献指南
从这里开始
- 先读完整个 Issue，再读项目的贡献指南。
- 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
- Fork 仓库，在一个分支上完成修改。
- 提交 Pull Request，并在描述里引用这个 Issue 编号。
UI5/webcomponents-react 的其他 Issue
-
[Feature Request]: [FilterBar] Basic Search Field Should Trigger Search on Enter Key Press (Fiori Design Compliance)可能已有人在做 @Lukas742 于 2 天前认领。 未关闭
难度 3/5 1-2 天 新手友好度 68/100
UI5/webcomponents-react#9014 · 6 条评论 ·
维护者通常 1 天内回复
-
难度 5/5 一周以上 新手友好度 20/100
UI5/webcomponents-react#8529 ·
维护者通常 1 天内回复
-
Design Pending SAP SF
难度 3/5 1-2 天 新手友好度 45/100
UI5/webcomponents-react#8158 · 1 条评论 · 1 个 reaction ·
维护者通常 1 天内回复
-
a11y Design Pending
难度 3/5 1-2 天 新手友好度 35/100
UI5/webcomponents-react#7582 · 4 条评论 ·
维护者通常 1 天内回复
-
难度 4/5 3-5 天 新手友好度 42/100
UI5/webcomponents-react#7546 · 1 条评论 ·
维护者通常 1 天内回复
查看 UI5/webcomponents-react 的全部 Issue
相似的 Issue
-
难度 1/5 1 小时以内 新手友好度 72/100
supadata-ai/mcp#27 ·
-
bug
难度 2/5 1-3 小时 新手友好度 72/100
capricorn86/happy-dom#2485 ·
维护者通常 2 天内回复
-
难度 2/5 1-3 小时 新手友好度 66/100
siyuan-note/siyuan#20430 · 1 条评论 ·
维护者通常 1 天内回复
-
难度 2/5 1-3 小时 新手友好度 70/100
维护者通常 2 天内回复
-
难度 2/5 1-3 小时 新手友好度 70/100
Albert-Weasker/niubigeo#194 ·
维护者通常 1 天内回复