Description
Environment
Please provide as many details as you can:
- Hosting type
- [] Form.io
- Local deployment
- Version:
"@formio/angular": "8.1.0",
"@formio/js": "5.0.0-rc.41",
"@formio/deprecated-types": "0.1.0",
- Version:
"@angular/cdk": "16.2.12",
"@angular/common": "16.2.12",
"@angular/compiler": "16.2.12",
"@angular/core": "16.2.12",
"@angular/forms": "16.2.12",
"@angular/localize": "16.2.12",
"@angular/material": "16.2.12",
"@angular/platform-browser": "16.2.12",
"@angular/platform-browser-dynamic": "16.2.12",
"@angular/platform-server": "16.2.12",
"@angular/router": "16.2.12",
"@angular/service-worker": "16.2",
- Frontend framework: Angular
- Browser: Chrome
- Browser version: 136.0.7103.94
Steps to Reproduce
- When editing a form, drag an element on the screen. The properties dialogue box opens. The property dialogue box will not close.
Expected behavior
The property dialogue box should close when clicking on the X, Save, or Cancel button.
Observed behavior
The dialogue modal will not close.
In reviewing the behavior between the Form Builder (Creator) and Form Editor, I noticed a key difference in how the dialog close button is handled.
In the working example (Creator), the click event listener for the close button (.formio-dialog-close) is correctly attached directly to the button element, and it triggers the expected dialog-closing behavior.
In the non-working example (Editor), the same button is present, but the click event listener is not attached directly to the close button. Instead, the listener appears to be registered on a higher-level container element (e.g., the body.modal-open or a parent wrapper). As a result, clicking the close button has no effect, and the dialog remains open.
I’ve attached screenshots showing the event listener targets in both cases. Could you please advise if this is a known issue, or if there is a recommended way to ensure consistent dialog-close behavior in the Editor?
Thank you!
See attached screenshots
Working Create Mode
Not Working Edit Mode