Este código simple crea un botón deshabilitado:

 import { Grid, IconButton } from "@material-ui/core"; import ArrowBackIosIcon from "@material-ui/icons/ArrowBackIos"; export default function App() { const handleClick = (e) => { e.stopPropagation(); }; return ( <div className="App"> <Grid container> <Grid item>Before</Grid> <Grid item> <IconButton disabled onClick={handleClick}> <ArrowBackIosIcon /> </IconButton> </Grid> <Grid item>After</Grid> </Grid> </div> ); }

Pero al hacer clic en el botón, se selecciona el div "Después". He intentado evitarlo agregando un controlador de eventos, pero no ayuda.

¿Cómo puedo evitar que se seleccione "Después" al hacer clic en el botón habilitado?

aquí está mi CodeSandBox: https://codesandbox.io/s/focused-elion-1tmtz0