Problem/Motivation
Found while testing UI Patterns #3622928. The contextual form saves on change through htmx. Two things go wrong around that request:
- Clicks are lost. Clicking a button while a field has focus fires
changeon mousedown. The htmx request addsdb-htmx-before-requestto the builder, which setspointer-events: none. Mouseup lands on the wrapper, so the click never reaches the button. The UI Patterns source selector "Save" needs two clicks. - Invalid values are dropped silently. The island
<form>is the htmx element and has nonovalidate. htmx checks browser validity first and stops the request without a message. A URL widget holding/nodeis never sent. Every later change sends the same invalid form, so the whole form looks blocked.
Steps to reproduce
- Add a Bootstrap Button and select it.
- URL prop: Configure, pick Token, type a token, click Save. The row stays open. A second click closes it.
- Another Button: type
/nodein 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
novalidateto island forms, so the server validates and the error shows as a toast.
Remaining tasks
- Playwright tests, failing first.
- Fix.
Issue fork display_builder-3623623
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 #2
mogtofu33 commentedComment #4
pdureau commentedTested with #3622928: UX of the asynchronous component form. It works.
Comment #5
mogtofu33 commented