Incorrect docs: Event target for 'up:form:submit' is not always the form
panda-madness opened this issue · comments
Bug description
According to the docs event.target for this event (as well as the handler's second parameter) should be the submitting form. However, currently both are set to the submitter button instead of the form.
Reproduction project
The issue can be reproduced by going to the unpoly demo, opening the dev console, running the following code:
up.on('up:form:submit', (event, form) => console.log(event.target, form));and creating/editing a task on that page. You will notice that an input[type=submit] gets logged twice.
The docs are outdated here. The event.target is the interaction origin, which is either a focused element within the form, the pressed submit button, or the form if nothing more specific is known.
I ended up solving my use case by adding a delegation selector like so:
up.on('up:form:submit', 'form', (event, form) => console.log(event.target, form));I could also just query the submitting form via event.target.closest('form'), though this would not handle the (edge) case where the submitter is outside the form. I sadly cannot fetch the form via button.form because my submitter is a web component button (Shoelace's sl-button) and not a regular one, and they have not yet implemented the Form Internals API yet.
In any case, thanks for clarifying!
Reopening because we need to fix the docs.
I sadly cannot fetch the form via button.form because my submitter is a web component button (Shoelace's sl-button) and not a regular one
Maybe this can help with a library like Shoelace:
- You can make Unpoly aware of custom submit buttons by pushing a selector to
up.form.config.submitButtonSelectors. - You can make Unpoly aware of custom input fields by pushing a selector to
up.form.config.fieldSelectors.
I've already added all the form inputs I need to fieldSelectors. What does submitButtonSelectors do exactly?