Button retains mdc-ripple-upgraded--background-focused style even though it's not focused

I have three buttons that I’m using as a search results view type button bank (grid view, list view, map view).

When a particular view type is active, the corresponding Button is marked as disabled so the user can’t reselect it (it’s already been applied).

Expected behaviour

When a user clicks an option, the button relating to that option should be highlighted, other buttons should lose their highlight.

Actual behaviour

Initial load with list view active:

I think that disabled is the wrong thing. What I really want is a a button group where the buttons work as a radio buttons (eg: https://getbootstrap.com/docs/4.1/components/buttons/#checkbox-and-radio-buttons) So my first problem with this is that the colours are wrong. The selected one should be highlighted, and the others should be secondary in this case.

It doesn’t feel like there’s a paradigm for that at the moment…?

After first click:

The selected button retains its focus style, even if I attribute focus to a different element on the screen.

After second click:

The first click-button still retains its focused style.

Code

        <div className="search-tools__format">
          <Button icon={<MaterialIcon icon="map" />} disabled={format === "map"} onClick={e => {changeViewFormat("map");}} />
          <Button icon={<MaterialIcon icon="view_list" />} disabled={format === "list"} onClick={e => {changeViewFormat("list");}} />
          <Button icon={<MaterialIcon icon="view_module" />} disabled={format === "grid"} onClick={e => {changeViewFormat("grid");}} />
        </div>

[TroyTae]

TBD This issue is fired when element’s disabled is being true after click. After click, element has mdc-ripple-upgraded--background-focused class. But blur event isn’t fired at disabled element, so this focus class is keep alive. There is need to think about how to solve this problem.

[adamsoffer]

@moog16 This seems to unfortunately still be an issue ->

https://codesandbox.io/s/material-react-ripple-bug-muly9