Skip to content
This repository has been archived by the owner on Sep 5, 2024. It is now read-only.

fix(checkbox): pointer events disable ripple events too #7541

Closed

Conversation

devversion
Copy link
Member

We should not disable the ripple events by using pointer-events: none.
IE11 always focuses the div, instead of the md-checkbox, and that's causing issues with ngModel etc.

A good trick is, to redirect the focus, instead of preventing the whole focus / pointer events.
This won't interfere with the ripple, but it will fix the IE11 issue.

https://connect.microsoft.com/IE/feedback/details/1028411/

cc @ThomasBurleson

Fixes #7538

@devversion devversion added the needs: review This PR is waiting on review from the team label Mar 11, 2016
We should not disable the ripple events by using `pointer-events: none`.
IE11 always focuses the div, instead of the `md-checkbox`, and that's causing issues with ngModel etc.

I good trick is, to redirect the focus, instead of preventing the whole focus / pointer events.
This won't interfere with the ripple, but it will fix the IE11 issue.

https://connect.microsoft.com/IE/feedback/details/1028411/

Fixes angular#7538
@devversion devversion force-pushed the fix/checkbox-ripple-events branch from 01e09a4 to 487a50e Compare March 11, 2016 23:03
@EladBezalel
Copy link
Member

LGTM

@EladBezalel EladBezalel added pr: merge ready This PR is ready for a caretaker to review and removed needs: review This PR is waiting on review from the team labels Mar 12, 2016
@ThomasBurleson
Copy link
Contributor

I am confused can we not use tabindex= 0 or -1 to solve the issue without programmatically redirecting focus?

@ThomasBurleson ThomasBurleson added the needs: team discussion This issue requires a decision from the team before moving forward. label Mar 13, 2016
@devversion
Copy link
Member Author

@ThomasBurleson That won't work, because that's the actual IE11 bug.
Normally when no tabIndex is set, then the element should be not focusable (in no cases). But IE11 decided to make DIV and SPAN always focusable. (no caring about tabIndex etc.)

@ThomasBurleson
Copy link
Contributor

@devversion - That is what I needed to know. Thx.

@ThomasBurleson ThomasBurleson removed the needs: team discussion This issue requires a decision from the team before moving forward. label Mar 13, 2016
ThomasBurleson pushed a commit that referenced this pull request Mar 16, 2016
We should not disable the ripple events by using `pointer-events: none`. IE11 always focuses the div, instead of the `md-checkbox`, and that's causing issues with ngModel etc.

* redirect the focus, instead of preventing the whole focus / pointer events.
*  @see https://connect.microsoft.com/IE/feedback/details/1028411/

Fixes #7538. Closes #7541.
ThomasBurleson pushed a commit that referenced this pull request Apr 1, 2016
We should not disable the ripple events by using `pointer-events: none`. IE11 always focuses the div, instead of the `md-checkbox`, and that's causing issues with ngModel etc.

* redirect the focus, instead of preventing the whole focus / pointer events.
*  @see https://connect.microsoft.com/IE/feedback/details/1028411/

Fixes #7538. Closes #7541.
ThomasBurleson pushed a commit that referenced this pull request Apr 1, 2016
We should not disable the ripple events by using `pointer-events: none`. IE11 always focuses the div, instead of the `md-checkbox`, and that's causing issues with ngModel etc.

* redirect the focus, instead of preventing the whole focus / pointer events.
*  @see https://connect.microsoft.com/IE/feedback/details/1028411/

Fixes #7538. Closes #7541.
@devversion devversion deleted the fix/checkbox-ripple-events branch April 19, 2016 19:51
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
pr: merge ready This PR is ready for a caretaker to review
Projects
None yet
Development

Successfully merging this pull request may close these issues.

md-checkbox missing ripples on click
3 participants