[ButtonGroup] Breaking when adding href to Button

[maejml]

Duplicates

• [X] I have searched the existing issues

Latest version

• [X] I have tested the latest version

Current behavior 😯

When using MUI's ButtonGroup, as soon as we add an href to one of the buttons, it breaks the layout, like so:

<ButtonGroup variant="contained" aria-label="outlined primary button group">
  <Button href="test.com">One</Button>
  <Button>Two</Button>
  <Button>Three</Button>
</ButtonGroup>

Result:

Expected behavior 🤔

Steps to reproduce 🕹

Steps:

1. Using MUI's ButtonGroup, like so:

   <ButtonGroup variant="contained" aria-label="outlined primary button group">
   <Button>One</Button>
   <Button>Two</Button>
   <Button>Three</Button>
   </ButtonGroup>

2. Adding href to one of the buttons

Context 🔦

No response

Your environment 🌎

Using BraveBrowser Version 1.35.104 Chromium: 98.0.4758.109 (Build officiel) (x86_64)

`npx @mui/envinfo`

``` System: OS: macOS 12.2.1 Binaries: Node: 17.5.0 - /usr/local/bin/node Yarn: 1.22.17 - /usr/local/bin/yarn npm: 8.4.1 - /usr/local/bin/npm Browsers: Chrome: 98.0.4758.109 Edge: Not Found Firefox: Not Found Safari: 15.3 npmPackages: @emotion/react: ^11.8.1 => 11.8.1 @emotion/styled: ^11.8.1 => 11.8.1 @mui/base: 5.0.0-alpha.69 @mui/icons-material: ^5.4.2 => 5.4.2 @mui/material: ^5.4.3 => 5.4.3 @mui/private-theming: 5.4.2 @mui/styled-engine: 5.4.2 @mui/styles: ^5.4.2 => 5.4.2 @mui/system: 5.4.3 @mui/types: 7.1.2 @mui/utils: 5.4.2 @types/react: 17.0.39 react: ^17.0.2 => 17.0.2 react-dom: ^17.0.2 => 17.0.2 ```

[abhinav-22-tech]

Use LinkComponent="button" refer by: https://stackoverflow.com/a/71259156

[maejml]

Actually, as I answered on Stack Overflow, adding LinkComponent="button" makes the link unclickable, as demonstrated in this sandbox. 😕

[soolidtech]

Hi

One can also reproduce this issue when using button as a react router link, the way it's described in documentation

    import { Link as RouterLink } from 'react-router-dom';

    <ButtonGroup
      variant="contained"
      aria-label="foo"
    >
      <Button>Foo</Button>
      <Button component={RouterLink} to="/">
        Home
      </Button>
      <Button>Bar</Button>
    </ButtonGroup>

[MaksymSlobodianyk]

Hi, are there any updates on this? This issue stops me from upgrading to v5. v4 doesn't have such an issue.

[mnajdova]

@MaksymSlobodianyk there is an ongoing PR that should fix the issue.

[hbjORbj]

https://github.com/mui/material-ui/issues/29514 should fix this issue

[RichieRock]

Any update on this? @mnajdova Which PR should fix this?

I'm facing this same issue with @mui/material@5.12.3. Using link in the button of button group brakes the styles of the button group because of last-of-type css selector not working properly. The button with the href will be rendered as a, whereas the other buttons are button elements. Therefore last-of-type is not working.

As a workaround I'm thinking of handling the href navigation by javascript instead of pure a href component. Thoughts on this?

[wascou]

Hi there, still got this issue on version 5.14.5 (mixing both href and onClick behaviors.

[KSSaiTeja]

i have solution with me.. if you assigned i will right now make a PR by forking project and also making a new branch. please consider this and assign the issue to me

[ZeeshanTamboli]

PR was already opened for this - #38520

[KSSaiTeja]

@ZeeshanTamboli ok then i will check other issues