Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Expose submitter to use:enhance SubmitFunction parameter #9414

Closed
karimfromjordan opened this issue Mar 12, 2023 · 0 comments · Fixed by #9425
Closed

Expose submitter to use:enhance SubmitFunction parameter #9414

karimfromjordan opened this issue Mar 12, 2023 · 0 comments · Fixed by #9425
Labels
feature / enhancement New feature or request forms Stuff relating to forms and form actions low hanging fruit ready to implement please submit PRs for these issues!
Milestone

Comments

@karimfromjordan
Copy link
Contributor

karimfromjordan commented Mar 12, 2023

Describe the problem

Currently it's a bit difficult to manage the submission status of (multiple) forms and do things like disabling the submit button and apply a CSS class while the form is loading. There already is an issue going a bit into this. In the meantime a simple non-breaking change to the enhance action could already help.

Describe the proposed solution

It would be nice if the enhance form action would expose the submitter of the submit event. This would allow us to do things like the following without having to create multiple loading variables and/or wrap the list item/form in a separate component.

<ol>
  {#each files as file (file.name)}
    <li>
      <span>{file.name}</span>
      <form
        method="POST"
        action="?/delete"
        use:enhance={({ submitter }) => {
          submitter.setAttribute("disabled", "true");

          return ({ update }) => {
            update().then(() => submitter.removeAttribute("disabled"));
          };
        }}
      >
        <button name="filename" value={file.name}>
          Delete
        </button>
      </form>
    </li>
  {/each}
</ol>

Currently we can of course use form.querySelector('button') but this just adds a bit more code and wouldn't work with multiple submit buttons.

Alternatives considered

No response

Importance

nice to have

Additional Information

No response

@dummdidumm dummdidumm added feature / enhancement New feature or request low hanging fruit ready to implement please submit PRs for these issues! labels Mar 13, 2023
@dummdidumm dummdidumm added this to the soon milestone Mar 15, 2023
@dummdidumm dummdidumm added the forms Stuff relating to forms and form actions label Mar 15, 2023
dummdidumm pushed a commit that referenced this issue Mar 15, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
feature / enhancement New feature or request forms Stuff relating to forms and form actions low hanging fruit ready to implement please submit PRs for these issues!
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants