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

Nested form submit trigger #236

Open
alexanderkirtzel opened this issue Jul 19, 2023 · 3 comments
Open

Nested form submit trigger #236

alexanderkirtzel opened this issue Jul 19, 2023 · 3 comments
Labels
good first issue Good for newcomers

Comments

@alexanderkirtzel
Copy link
Collaborator

Is your feature request related to a problem? Please describe.
Right now the submit trigger has to be placed in the form element. But it should also be working if it's placed on buttons, like the regular tagging works.

Describe the solution you'd like
The following code should work:

<form id="form" data-elb="form">
  <input type="text" />
  <button type="submit" data-elbaction="submit">Submit</button>
</form>
@alexanderkirtzel alexanderkirtzel added the good first issue Good for newcomers label Jul 19, 2023
@wintercodeNKJJ
Copy link

Needed:

please where are data-elbaction options defined?
so as to understand and define its behaviour relative to botton and form Elements

Probleme:

when doing the following changes in __tests__/html/trigger.html

- <form id="form" data-elb="form" data-elbaction="submit">
+ <form id="form" data-elb="form">
     <input type="text" />
-   <button type="submit" >Submit</button>
+   <button type="submit" data-elbaction="submit">Submit</button>
</form>

I get errors at this level __tests__/trigger.test.ts:199:20

@Temuu-jin
Copy link

Temuu-jin commented Apr 22, 2024

I'm at work and I just had some free time to look at stuff. Heres what I got so far, maybe the next person can work upon that.
trigger.ts:63

export function initGlobalTrigger(instance: WebClient.Instance): void {
document.addEventListener(
  'click',
  tryCatch(function (this: Document, ev: MouseEvent, sev: SubmitEvent) {
    const target = ev.target as HTMLElement;
    const formSubmit = target.closest('form');
    if (formSubmit?.getAttribute('data-elb') === 'form' && target.getAttribute('data-elbaction') === 'submit') {
      triggerSubmit.call(this, instance, sev);
    }
    triggerClick.call(this, instance, ev);
  }),
);
document.addEventListener(
  'submit',
  tryCatch(function (this: Document, ev: SubmitEvent) {
    triggerSubmit.call(this, instance, ev);
  }),
);
}

@Temuu-jin
Copy link

In the 'click' listener I check if the parent element contains data-elb='form' and the button I click has data-elbaction='submit' , if its true i send a triggerSubmit.call(this, instance, ev); where ev: SubmitEvent not MouseEvent.

I dont really have the time right now to install all dependencies of all packages and try run tests, too many dependency issues to take care of. However, I hope this pushes the issue in the right direction

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
good first issue Good for newcomers
Projects
Development

No branches or pull requests

3 participants