Problem/Motivation

Found while testing UI Patterns #3622928. The contextual form saves on change through htmx. Two things go wrong around that request:

  1. Clicks are lost. Clicking a button while a field has focus fires change on mousedown. The htmx request adds db-htmx-before-request to the builder, which sets pointer-events: none. Mouseup lands on the wrapper, so the click never reaches the button. The UI Patterns source selector "Save" needs two clicks.
  2. Invalid values are dropped silently. The island <form> is the htmx element and has no novalidate. htmx checks browser validity first and stops the request without a message. A URL widget holding /node is never sent. Every later change sends the same invalid form, so the whole form looks blocked.

Steps to reproduce

  1. Add a Bootstrap Button and select it.
  2. URL prop: Configure, pick Token, type a token, click Save. The row stays open. A second click closes it.
  3. Another Button: type /node in the URL field, then tab out. Nothing is updated and no error shows. Toggling "Disabled" does nothing either.

Proposed resolution

  • Don't block the pointer for a request triggered by a form change.
  • Add novalidate to island forms, so the server validates and the error shows as a toast.

Remaining tasks

  • Playwright tests, failing first.
  • Fix.
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

Issue summary: View changes

pdureau’s picture

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 cda4f833 on 1.0.x
    fix: #3623623 Contextual form loses clicks and invalid values silently...