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.

Sign up for GitHub

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

Jump to bottom

[VueJs]disabled button are still clickable #572

Closed
mehdijouan opened this issue Jun 20, 2019 · 4 comments · Fixed by #586
Closed

[VueJs]disabled button are still clickable #572

mehdijouan opened this issue Jun 20, 2019 · 4 comments · Fixed by #586
Labels
consulting

Comments

@mehdijouan
Copy link

Describe the bug
disabled buttons are still clickable

To reproduce
Steps to reproduce the behavior:

  1. Go to CodeSandbox example
  2. use the count button
  3. change state of the button
  4. click again ... the count continues to increase

Expected behavior
nothing should happen when button is disabled

Context

  • UI5 Web Components version 0.12.0
  • OS/Platform: mac os
  • Browser (if relevant): chrome

Affected components (if known)
ui5-button
@MapTo0
Copy link
Member

MapTo0 commented Jun 20, 2019

Hello @mehdijouan,

Try to use the semantic press event we are providing for the button.

I modified your snippet to
<ui5-button type="Positive" :disabled="isActive" v-on:press="updateCount">count</ui5-button>

And counter is not more increased.

Regards,
Martin

@MapTo0 MapTo0 closed this as completed Jun 20, 2019
@MapTo0
Copy link
Member

MapTo0 commented Jun 20, 2019 •
edited
Loading

P.S. looks like the view fires the onclick event no matter if the target is disabled or no.

To be honest, this sounds strange to me as even the native HTML Button does not fire the click event if the button is disabled.

https://jsbin.com/sokuwixoja/edit?html,output

Thanks for reporting! We were just thinking if we need this press event :D

@mehdijouan
Copy link
Author

Press works fine, thanks for the hint!
I have also to admit that the onClick behavior is quite strange...

@pskelin pskelin mentioned this issue Jun 26, 2019
Merged
pskelin added a commit that referenced this issue Jun 26, 2019
@pskelin
fix: disable click events for disabled ui5-button (#586)
387fa9a 
add pointer-events: none to host component so in case it is disabled,
the browser does not call click handlers registered to it.

add chai for better assertion messages

* move click handler to shadow dom
this way, the component can handle the click first and then the app handler
will have the correct component state in its click handler

* remove event-related qunit tests
With click handlers registered in the shadow dom, the qunit tests
can no longer simulate events correctly.
For these scenarios, the wdio tests will be used anyway.

* fix ie11 mousedown problem in IE11
remove disabled check, CSS takes care of that

Fixes: #572
@pskelin
Copy link
Contributor

pskelin commented Jun 26, 2019

@mehdijouan we have removed all obstacles and are going to deprecate the press event in favour of click. With the next release, click should no longer be fired for disabled buttons so feel free to switch to using it as the recommended way.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
consulting
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix: disable click events for disabled ui5-button SAP/ui5-webcomponents
3 participants
@MapTo0 @mehdijouan @pskelin