Disabling Focus Highlight in Material Web Components

1

Hi everyone,

I’m using Material web components in my Chrome extension, but I’m having trouble customizing them. More precisely, when I click the switch component a ripple effect appears around it and stays there as long as the element is focussed.
The relevant portions of my html look like this:

<link rel="stylesheet" href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css">
...
<div class="mdc-switch">
        <div class="mdc-switch__track"></div>
        <div class="mdc-switch__thumb-underlay">
            <div class="mdc-switch__thumb"></div>
            <input type="checkbox" id="basic-switch" class="mdc-switch__native-control" role="switch"
                aria-checked="false">
        </div>
 </div>
...

And to enable functionality, I included the following in a javascript file:

import {MDCSwitch} from '@material/switch';
const switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));

Here’s what it looks like:

image

This behavior appears with Material buttons as well. Any ideas on how I might disable this focus highlight?

All the code is on GitHub. I appreciate any tips.

2

Hey there,

it would be awesome to create a minimal codesandbox.

Currently I get some errors because it is a Chrome extension and I’m not into Chrome extensions, so I don’t know what I have to remove.

3

Hi!
So try as I might, I couldn’t get the codesandbox to work right with the material dependencies. Nevertheless, for anyone who might be interested in a solution to this, what I needed to do was add a styles.scss file with the following:

@use "@material/switch";
@include switch.core-styles;

.mdc-switch {
    @include switch.ripple-states-opacity(
        (
            "focus": 0,
            "hover": 0,
            "press": 0,
        )
    );
}

This, however, only removed the highlight when turning the switch from off to on. From on to off, the highlight would persist as long as the switch was focussed.

The solution to that was to remove <link rel="stylesheet" href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css"> from the HTML. I couldn’t achieve the same effect with material buttons, though, using the same solution. However, it works for switches.

Finally, I ended up using this toggle switch implementation instead for its better ease of use.

1 Like