feat(button): submit from outside of form

[postnerd]

Pull request checklist

Please check if your PR fulfills the following requirements:

• Tests for the changes have been added (for bug fixes / features)
• Docs have been reviewed and added / updated if needed (for bug fixes / features)
  • Some docs updates need to be made in the ionic-docs repo, in a separate PR. See the contributing guide for details.
• Build (npm run build) was run locally and any changes were pushed
• Lint (npm run lint) has passed locally and any fixes were made for failures

Pull request type

Please check the type of change your PR introduces:

• Bugfix
• Feature
• Code style update (formatting, renaming)
• Refactoring (no functional changes, no api changes)
• Build related changes
• Documentation content changes
• Other (please describe):

What is the current behavior?

Buttons with type "submit" will only work from inside forms.

Issue URL: #21194

What is the new behavior?

Now you can add a "form" prop to every that will be used, if the button is placed outside of a form. This can be helpful, if the button is added to a header/footer toolbar but should be responsible for a specific form.

Does this introduce a breaking change?

• Yes
• No

Other information

Not sure, if the docs have to be updated. If so, I'm happy to do so. Maybe you could guide me to the right place.

[sean-perkins]

Small suggestion on the documentation (will require a new npm run build for the generated outputs).

We will also need Playwright tests for this feature.

For example, in core/src/components/button/test/form-reference create a new button.e2e.ts file.

You will need to test 3 conditions:

1. Form with an ID
2. Form as a reference
3. No form (querying the closest form).

For these, setting the HTML mark-up per test is probably easiest.

I did not run these tests locally, but something like this:

test.describe('button: form', () => {

  test('should submit the form by id', async({ page }) => {
    await page.setContent(`
      <form id="myForm"></form>
      <ion-button form="myForm" type="submit">Submit</ion-button>
    `);

    const submitEvent = await page.spyOnEvent('submit');
    
    await page.click('ion-button');

    expect(submitEvent).toHaveReceivedEvent();
  });

  test('should submit the form by reference', async({ page }) => {
    await page.setContent(`
      <form></form>
      <ion-button type="submit">Submit</ion-button>
      <script>
        const form = document.querySelector('form');
        const button = document.querySelector('ion-button');

        button.form = form;
      </script>
    `);

    const submitEvent = await page.spyOnEvent('submit');
    
    await page.click('ion-button');

    expect(submitEvent).toHaveReceivedEvent();
  });

  test('should submit the closest form', async({ page }) => {
    await page.setContent(`
    <form>
      <ion-button type="submit">Submit</ion-button>
    </form>
  `);

  const submitEvent = await page.spyOnEvent('submit');
  
  await page.click('ion-button');

  expect(submitEvent).toHaveReceivedEvent();
  });
});

Let me know if you have questions.

[postnerd]

@sean-perkins Thanks for the support. But I can't get the tests to run.

I've tried all possible commands for testing npm run test.screenshot or npm run test or npm run run test.e2e but only the plain e2e.ts files will be executed not the button.e2e.ts files.

npm test src/components/button/test/basic/button.e2e.ts will run into the following error message Pattern: src/components/button/test/basic/button.e2e.ts - 0 matches.

[liamdebeasi]

@postnerd We are in the middle of a transition between two E2E testing systems. The npm run test.e2e command is for the old system. You should do npx playwright test src/components/button/test/basic to run the new Playwright tests.

[postnerd]

Added the required tests.

Please let me know if there is anything else to do.

(Messed up this one commit when adding the tests with a wrong commit message.) Since this is such a small PR I could just create another branch and PR with just one commit if you want me to.)

[sean-perkins]

The commit message is ok here. We will end up squashing the commits anyways, so only the topmost description (the PR title) will matter.

I approved CI to run to verify the tests. I don't see any other items requiring changes on my end.

If CI passes, I'll add the team and we can discuss the release target for this feature.

[postnerd]

@sean-perkins Is there anything to do from my side because of the failed tests?

[sean-perkins]

@postnerd merge the latest change from main into this branch, run npm run build (from the core folder) and commit any changes (if any).

[postnerd]

Merged again (after @liamdebeasi already merged) because the branch was again one commit behind.

npm run build didn't bring anything up related to this pull request.

Only one change to angular/src/directives/proxies-list.ts that I've ignored before, because it looks like an unrelated style fix (a strange one, adding a line at the beginning of the file ...).

[sean-perkins]

Yeah, you can ignore that diff. Running npm run prettier from the /angular folder will overwrite that change and reformat the file with the current state.

I re-triggered CI to run.

[sean-perkins]

@postnerd update on our end: The team has drafted and approved a design document around this feature. The only item that is outstanding as a result, is we want to introduce a developer warning when the form cannot be found, when using the form syntax.

I can snag this scope & can commit it directly to your fork.

We will target this feature for 6.3 after I make that change & then the team can do a final review.

[amandaejohnston]

LGTM once the comment is addressed 👍

[liamdebeasi]

This warning is a bit confusing because it implies that the form element is not in the DOM at all. However, it could be the case that the element is in the DOM but is not an HTMLFormElement.

[sean-perkins]

Updated the warning message. Let me know if it is more clear or requires additional adjustment.

[sean-perkins]

Great work here @postnerd 👍 thanks for the contribution!