Problem/Motivation
I think this is a good candidate for further simplifying the dialog.
The library is already in the core.
The truth is still marked as internal.
But it may also appear here https://www.drupal.org/project/drupal/issues/3197758
Proposed resolution
floating-ui, in addition to very flexible positioning tools, has two interesting features:
1. https://floating-ui.com/docs/autoUpdate which allows you to turn off other listeners
2. https://floating-ui.com/docs/virtual-elements What allows you to use the virtual element created by Drupal.displace
Remaining tasks
Now basically everything works in this MR.
Minor changes are needed to fully support all previous positionOptions.
I'll send a review request. But mainly to listen to feedback.
User interface changes
API changes
Data model changes
Release notes snippet
| Comment | File | Size | Author |
|---|---|---|---|
| #24 | 3446818-24.png | 184.71 KB | anruether |
Issue fork drupal-3446818
Show commands
Start within a Git clone of the project using the version control instructions.
Or, if you do not have SSH keys set up on git.drupalcode.org:
Comments
Comment #6
finnsky commentedComment #7
finnsky commentedComment #11
nod_Comment #12
nod_haven't tested it yet but code looks good, I'm +1 on using floating ui for that
Comment #13
finnsky commentedCool. Gonna continue then.
Comment #14
catchI think this is a good idea, and I think it's fine if core uses internal libraries more than once.
Comment #15
larowlanShould we also consider anchor position with a polyfill now it's in chrome and Firefox has also signalled intent to ship? There's a polyfill from oddbird
Comment #16
nod_Since we use jQuery UI we have to use some js for positioning. If we had native dialogs it would be easier to go with css-onlu for positioning.
Comment #17
finnsky commentedI like CSS-only positioning. But what about
1. my/at/flip in https://api.jqueryui.com/position/ ?
2. also not clean how to set maxWidth etc.
3. https://git.drupalcode.org/project/drupal/-/blob/11.x/core/misc/dialog/o... off-canvas.
Floating UI seems allows to keep all previous features.
Comment #18
finnsky commentedComment #21
finnsky commentedComment #22
smustgrave commentedMR appears to have some failures
Removing the beta targets since we missed that boat.
Comment #24
anruetherI tried the MR on a site where I have issues with dynamically loaded content (webform_booking widget) in the modal, which jquery_ui does not account for. With the MR this issue is resolved but I ran into another one on iOS 26/Safari: On focus the positioning breaks, see screenshot.
Comment #25
anybodyPlease note that this still seems to be based on the legacy jQuery UI dialog which hopefully soon will be replaced by native HTML5 dialog + HTMX: #2158943: PP-1 Add a native dialog element using HTMX to deprecate the jQuery UI dialog
Unsure if it makes sense to proceed here then.