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

Lion Button should not react to clicks when its disabled #2354

Conversation

aghArdeshir
Copy link
Contributor

@aghArdeshir aghArdeshir commented Aug 27, 2024

This PR fixes: #2330 and is blocked by: #2353

This PR:

image

If I found any more information about the formAssociated, I'll share. If anyone knows what is this and why it fixes the issue, please knowledge-share 🙏

Copy link

changeset-bot bot commented Aug 27, 2024

⚠️ No Changeset found

Latest commit: b0b7c7a

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

@denilsonsa
Copy link

If I found any more information about the formAssociated, I'll share. If anyone knows what is this and why it fixes the issue, please knowledge-share 🙏

From this MDN article I got to the official HTML spec, and after navigating for a while I got to form-associated custom elements:

An autonomous custom element is called a form-associated custom element if the element is associated with a custom element definition whose form-associated field is set to true.

The name attribute represents the form-associated custom element's name. The disabled attribute is used to make the form-associated custom element non-interactive and to prevent its submission value from being submitted. The form attribute is used to explicitly associate the form-associated custom element with its form owner.

Or, in a nutshell, from my understanding of those paragraphs: the name, disabled, form and readonly attributes only have their special semantics for custom elements that are form-associated. (And the readonly attribute has a few caveats listed one paragraph later.)


I'd suggest you to please check all lion input fields and see if they all are form-associated. For your convenience (and your sanity), there is a list of form-associated elements

@aghArdeshir aghArdeshir marked this pull request as draft October 14, 2024 06:04
@aghArdeshir
Copy link
Contributor Author

Thanks @denilsonsa really useful links 👍 . So I learned that static formAssociated = true; not only helps with clicks, but so many other accessibility features baked into native form elements. And we could also put it on more lion form components. 👍

I'm currently blocked by this MR: #2353 because without it, I can't get these components under automated tests.

@tlouisse
Copy link
Member

tlouisse commented Nov 6, 2024

Thanks for discovering the bug in LionButton and all the investigative work @aghArdeshir and @denilsonsa!

Wrt adding formAssociatedas a solution to this bug: I think it unintentionally disables .click():
webcomponents/polyfills@aeb2038#diff-69baa2421e0bf5e67686e1b8184753023486289b9bc745d974495db827b31a69R151
Seems to be a bug in the polyfill 🙂

So the best way to fix this is disabling .click in all controls. So in DisabledMixin we could do:

click() {
  if (this.disabled) return;
  super.click();
}

That doesn't mean we don't want form association in Lion. Together with ElementInternals, it is indeed something that we want to be incorporate in our form controls in the future, especially as they might allow us to get rid of the registration system and they will make our code base leaner/smaller in general.

@tlouisse
Copy link
Member

tlouisse commented Nov 7, 2024

@aghArdeshir do you want to create a pull request for this?

  • add the click function in DisabledMixin?
  • rewrite your existing test and apply DisabledMixin.test.js (add expects and replace LionButton with CanBeDisabled element from test)?

@aghArdeshir aghArdeshir deleted the issue-2330-disabled-button-should-not-react-to-clicks branch December 5, 2024 06:49
@aghArdeshir
Copy link
Contributor Author

Sorry for the late reply. And thanks fr fixing this 😃

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
3 participants