[ButtonGroup] Sticky hover leaves a darkened divider border after tapping on touch devices

[petr-kratochvil]

Steps to reproduce

Steps:

1. Open this link to live example

• Full Code: https://codesandbox.io/p/sandbox/mui-buttongroup-8ng7lk?file=%2Fsrc%2FDemo.tsx
• Just the app (link for mobile device): https://8ng7lk.csb.app

2. Open it on touch device. Firefox's Responsive Design Mode also serves good. Chrome's DevTools don't emulate the touch effect fully enough.
3. Tap the first or the middle button in any ButtonGroup.

Current behavior

The right (or bottom) border of the tapped button is darkened and stays like that until blur.

Screenshots from Firefox 153 (Macos, in Responsive Design Mode):

Expected behavior

The right (or bottom) border of the tapped button should not be pernamently changed on tap. The behavior should be consistent with the behavior of the Button component outside a ButtonGroup.

Context

• A ButtonGroup with variant="oulined" and at least two buttons
• The tap on touch device triggers :hover class, and leaves the style sticky
• The :hover class for a button in a ButtonGroup is not consistent on @media not (hover: hover) - it highlights only the right border of the first or middle button.

Your environment

npx @mui/envinfo

  System:
    OS: macOS 15.7.7
  Binaries:
    Node: 24.19.0 - /usr/local/bin/node
    npm: 11.17.0 - /usr/local/bin/npm
    pnpm: 11.21.0 - /usr/local/bin/pnpm
  Browsers:
    Chrome: 151.0.7922.138
    Edge: Not Found
    Firefox: 153.0.3
    Safari: 26.5
  npmPackages:
    @mui/internal-babel-plugin-minify-errors: 2.0.8-canary.27 => 2.0.8-canary.27 
    @mui/internal-bundle-size-checker: 1.0.9-canary.78 => 1.0.9-canary.78 
    @mui/internal-code-infra: 0.0.4-canary.101 => 0.0.4-canary.101 
    @mui/internal-netlify-cache: 0.0.3-canary.5 => 0.0.3-canary.5 
    @mui/internal-scripts: workspace:^ => 3.0.10 
    @mui/internal-test-utils: 2.0.18-canary.23 => 2.0.18-canary.23 
    @pigment-css/react: 0.0.31 => 0.0.31 
    @types/react: 19.2.18 => 19.2.18 
    react: 19.2.8 => 19.2.8 
    react-dom: 19.2.8 => 19.2.8 
    typescript: 6.0.3 => 6.0.3 

Touch behavior tested on Chrome 151 (on Android) and in Firefox 153 (Macos, in Responsive Design Mode).

Search keywords: ButtonGroup hover outlined border touch

[silviuaavram]

I can also repro on Chrome responsive mode, the end border of the toggle button remains with this style after the touch event.

.css-2wcvut-MuiButtonGroup-root .MuiButtonGroup-firstButton:hover, .css-2wcvut-MuiButtonGroup-root .MuiButtonGroup-middleButton:hover {
    border-bottom-color: currentColor;
}

[github-actions]

This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

---

@petr-kratochvil Thanks again for creating this issue! If you have a moment, we would love to hear your thoughts on how we handled it with this short feedback form.