Cannot cancel a dialog with a required field in an illegal state

[zmullett]

What is affected?

Component

Description

Expect to be able to set up a form as so:

<md-dialog open>
        <form
            slot="content"
            id="email-dialog-form"
            method="dialog">
          <md-filled-text-field
              id="email-dialog-input"
              label="Email address"
              type="email"
              required>
          </md-filled-text-field>
        </form>
        <div slot="actions">
          <md-text-button
              value="cancel"
              form="email-dialog-form">
            Cancel
          </md-text-button>
          <md-text-button
              value="ok"
              form="email-dialog-form">
            OK
          </md-text-button>
        </div>
</md-dialog>

And that the user can cancel it without filling in the required field.

From the documentation and demos it's unclear how this could be arranged or whether it's possible.

Reproduction

https://lit.dev/playground/#project=W3sibmFtZSI6InNjcmlwdC5qcyIsImNvbnRlbnQiOiJpbXBvcnQgJ0BtYXRlcmlhbC93ZWIvZGlhbG9nL2RpYWxvZy5qcyc7XG5pbXBvcnQgJ0BtYXRlcmlhbC93ZWIvYnV0dG9uL3RleHQtYnV0dG9uLmpzJztcbmltcG9ydCAnQG1hdGVyaWFsL3dlYi90ZXh0ZmllbGQvZmlsbGVkLXRleHQtZmllbGQuanMnOyJ9LHsibmFtZSI6ImluZGV4Lmh0bWwiLCJjb250ZW50IjoiPCFET0NUWVBFIGh0bWw-XG48c2NyaXB0IHR5cGU9XCJtb2R1bGVcIiBzcmM9XCIuL3NjcmlwdC5qc1wiPjwvc2NyaXB0PlxuXG48bWQtZGlhbG9nIG9wZW4-XG4gICAgICAgICAgPHNwYW4gc2xvdD1cImhlYWRsaW5lXCI-RW50ZXIgeW91ciBlbWFpbDwvc3Bhbj5cbiAgICAgICAgPGZvcm1cbiAgICAgICAgICAgIHNsb3Q9XCJjb250ZW50XCJcbiAgICAgICAgICAgIGlkPVwiZW1haWwtZGlhbG9nLWZvcm1cIlxuICAgICAgICAgICAgbWV0aG9kPVwiZGlhbG9nXCI-XG4gICAgICAgICAgPG1kLWZpbGxlZC10ZXh0LWZpZWxkXG4gICAgICAgICAgICAgIGlkPVwiZW1haWwtZGlhbG9nLWlucHV0XCJcbiAgICAgICAgICAgICAgbGFiZWw9XCJFbWFpbCBhZGRyZXNzXCJcbiAgICAgICAgICAgICAgdHlwZT1cImVtYWlsXCJcbiAgICAgICAgICAgICAgcmVxdWlyZWQ-XG4gICAgICAgICAgPC9tZC1maWxsZWQtdGV4dC1maWVsZD5cbiAgICAgICAgPC9mb3JtPlxuICAgICAgICA8ZGl2IHNsb3Q9XCJhY3Rpb25zXCI-XG4gICAgICAgICAgPG1kLXRleHQtYnV0dG9uXG4gICAgICAgICAgICAgIHZhbHVlPVwiY2FuY2VsXCJcbiAgICAgICAgICAgICAgZm9ybT1cImVtYWlsLWRpYWxvZy1mb3JtXCI-XG4gICAgICAgICAgICBDYW5jZWxcbiAgICAgICAgICA8L21kLXRleHQtYnV0dG9uPlxuICAgICAgICAgIDxtZC10ZXh0LWJ1dHRvblxuICAgICAgICAgICAgICB2YWx1ZT1cIm9rXCJcbiAgICAgICAgICAgICAgZm9ybT1cImVtYWlsLWRpYWxvZy1mb3JtXCI-XG4gICAgICAgICAgICBPS1xuICAgICAgICAgIDwvbWQtdGV4dC1idXR0b24-XG4gICAgICAgIDwvZGl2PlxuPC9tZC1kaWFsb2c-In0seyJuYW1lIjoicGFja2FnZS5qc29uIiwiY29udGVudCI6IntcbiAgXCJkZXBlbmRlbmNpZXNcIjoge1xuICAgIFwibGl0XCI6IFwiXjIuMC4wXCIsXG4gICAgXCJAbGl0L3JlYWN0aXZlLWVsZW1lbnRcIjogXCJeMS4wLjBcIixcbiAgICBcImxpdC1lbGVtZW50XCI6IFwiXjMuMC4wXCIsXG4gICAgXCJsaXQtaHRtbFwiOiBcIl4yLjAuMFwiXG4gIH1cbn0iLCJoaWRkZW4iOnRydWV9XQ

Workaround

Need to manually invoke validation and prevent form closure on a submit action. Maybe there are other alternatives.

Is this a regression?

No or unsure. This never worked, or I haven't tried before.

Affected versions

1.0.1

Browser/OS/Node environment

Tested on Chrome 119.0.6045.159.

[christophe-g]

The use of novalidate should answer your use case.

This should be added in the docs as the requirement is quite common while the approach is not completely trivial.

[summersz]

I think setting the attribute type="button" on the cancel button would be the solution here, so it still validates on the ok button.

[christophe-g]

@asyncLiz - can formnovalidate be added as buttons properties:

in the example above, you might want to not keep form validation (no novalidate attribute on the form element), and skip the validation on the cancel button (by adding a formnovalidate attribute)

@summersz - I don't think type="button" will close the dialog.

[datvm]

Yeah I reported this use case to MDN before: https://github.com/mdn/content/issues/10848 they should add that to the docs and indeed we need formnovalidate. If it's not possible, like the above comment, you probably need custom Javascript for now.

[asyncliz]

formnovalidate would be the right approach for this +1

[zmullett]

It looks like formnovalidate doesn't work as expected when applied to the Cancel button. Initially I thought that the lack of propagation from md-text-button to button was the cause, but when I manually add the attribute to the inner button tag it also continues to fire the validation (why?). The only way I've found that prevents the validation is to add novalidate to the form, but that means no validation. Otherwise the current workaround looks like a JavaScript solution involving triggering manual validation and cancelling the dialog close.