fix(ripple): Register focus/blur handlers in IE #3294
Conversation
| const {ROOT, UNBOUNDED} = MDCRippleFoundation.cssClasses; | ||
| requestAnimationFrame(() => { | ||
| this.adapter_.addClass(ROOT); | ||
| if (this.adapter_.isUnbounded()) { |
There was a problem hiding this comment.
Suggestion: Invert this if statement and return early to reduce nesting:
const isBounded = !this.adapter_.isUnbounded();
if (isBounded) {
return;
}
this.adapter_.addClass(UNBOUNDED);
this.layoutInternal_();There was a problem hiding this comment.
I might consider this if there were a significant number of operations inside of the condition, but it's 2 lines of code and I feel like the early bail-out on an inverted condition would be harder to read (or, in your example with a separate variable, takes 2 more LOC than what's here now).
Codecov Report
@@ Coverage Diff @@
## master #3294 +/- ##
=======================================
Coverage 98.03% 98.03%
=======================================
Files 120 120
Lines 5184 5184
Branches 649 650 +1
=======================================
Hits 5082 5082
Misses 102 102
Continue to review full report at Codecov.
|
|
All 176 screenshot tests passed for commit 487fd24 vs. |
|
All 188 screenshot tests passed for commit 9403452 vs. |
|
All 188 screenshot tests passed for commit 6d614e5 vs. |
Ripple JS logic has historically always completely short-circuited browsers that don't support CSS variables. This changes it to still set up focus and blur handling, for the sake of components with complex DOM structure where a focusable element is not the root element of the ripple.
This also updates checkbox and radio styles to avoid applying their unique CSS-only focus styles to instances with JS ripples... and also fixes those CSS-only focus styles to use the same opacity as the JS ripples.
Fixes #3212.