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

[LionButton] @click event listener is called when button has disabled and click is trigger programatically using JS .click() method #2330

Open
jhuesos opened this issue Aug 12, 2024 · 5 comments · May be fixed by #2354

Comments

@jhuesos
Copy link

jhuesos commented Aug 12, 2024

Expected behavior

When a lion-button has the attribute disabled, the JavaScript .click() method should not trigger the @click listener(s)

Actual Behavior

Clicking with mouse does respect the disabled attribute, but when calling with the .click() it does not.

https://stackblitz.com/edit/vite-zh1vmm?file=main.js

Additional context

Which component and version of it are you using.

@aghArdeshir
Copy link
Contributor

I looked into this for a few hours:

  • It is hard to reproduce it in the automated tests for some reason. But it is easily reproducible in the context of a normal consumer app
  • Simply putting this line in the LionButton.js seems to solve this issue, and I don't know why:

image

And its hard to vlaidate this fix, because it is hard to put this problem in an automated test

@aghArdeshir
Copy link
Contributor

I found about the reason that prevented me from writing a test for this bug: #2351

After fixing #2351, I should be unblocked for working on this bug with disabled lion-buttons handling clicks

@aghArdeshir
Copy link
Contributor

This PR: #2354 fixes this issue

@denilsonsa
Copy link

Hi! When @jhuesos showed me the bug in lion-button, I decided to check if the native elements would also behave the same way. So I created a small testcase showing the behavior of native HTML elements when being clicked while disabled. I'm sharing the link here because I think it is relevant, and it can serve as a baseline to build a similar testcase for lion input fields.

@aghArdeshir
Copy link
Contributor

Thanks. I've also created this reproduction link in my other issue: https://studio.webcomponents.dev/edit/CdTHK8iuVNqVSuive1NH/src/index.js?p=README.md that shows the difference in behavior for lion button vs native button

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

Successfully merging a pull request may close this issue.

3 participants