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.

Command icon 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

mogtofu33 created an issue. See original summary.

mogtofu33’s picture

Assigned: mogtofu33 » Unassigned
Status: Needs work » Fixed

Now that this issue is closed, review the contribution record.

As a contributor, attribute any organization that helped you, or if you volunteered your own time.

Maintainers, credit people who helped resolve this issue.

  • mogtofu33 committed f3a47c36 on 1.0.x
    fix: #3631443 Contextual form loses #ajax changes and hides autocomplete...
pdureau’s picture

Assigned: mogtofu33 » Unassigned
Status: Needs work » Fixed
Issue tags: +display_builder-1.0.0-beta9

Has been shipped with beta9

Now that this issue is closed, review the contribution record.

As a contributor, attribute any organization that helped you, or if you volunteered your own time.

Maintainers, credit people who helped resolve this issue.

pdureau’s picture

Status: Fixed » Closed (fixed)