Problem/Motivation
Found while testing ui_icons in a page layout, see ui_icons #3591899: Add automated functional acceptance testing for Webshare with webship-js (Playwright + Cucumber-js), Drupal Canvas + Drupal CMS support, and MkDocs documentation.
A form element with its own `#ajax` on `change` is never saved by itself: core's `Drupal.Ajax.prototype.eventResponse()` calls `stopPropagation()`, so the contextual form's `data-hx-trigger="change consume"` never receives the event.
The value is only stored when another field of the form changes later.
In expanded mode, the jQuery UI autocomplete menu is appended to `body` with a z-index of 1000, below the builder at 1251, so the suggestions render behind the drawer.
Steps to reproduce
1. Enable ui_icons_patterns and ui_icons_picker, open a page layout builder.
2. Insert the "Icon" block, select another element, then the Icon block again.
3. In its Config tab, click the preview box and pick an icon in the grid. No PUT request is sent and the Canvas does not change.
4. Expand the builder with Shift+E and type an icon name. The suggestions are hidden behind the drawer.
Proposed resolution
When a Drupal ajax request started from an element of a contextual form completes, trigger that form's HTMX `change` once.
Add a z-index token for body-level menus above `--db-z-dialog`, and raise `.ui-autocomplete` with it in `assets/css/_fix.css`, next to the existing dialog rule.
User interface changes
None, both fixes restore the expected behavior.
API changes
None.
Data model changes
None.
Issue fork display_builder-3631443
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 #3
mogtofu33 commentedComment #6
pdureau commentedHas been shipped with beta9
Comment #8
pdureau commented