CODEWITHSUNDEEP
material-ui
Gowtham Manthena
Gowtham Manthena

Reputation: 279

How to access onClick action in Material UI Link through keyboard Tab key without using component="button" or href when I use tabIndex in it

After I got the focus on Material UI Link through keyboard tab key using tabIndex, the click action is not working when I hit the enter button. I don't understand why. Can anyone help me with this? Thank you.

sandbox link: https://codesandbox.io/s/material-demo-forked-4evbh?file=/demo.tsx

code:

/* eslint-disable jsx-a11y/anchor-is-valid */
 import React from "react";
 import { makeStyles, createStyles, Theme } from "@material-ui/core/styles";
 import Link from "@material-ui/core/Link";
 import Typography from "@material-ui/core/Typography";

 const useStyles = makeStyles((theme: Theme) =>
 createStyles({
 root: {
  "& > * + *": {
    marginLeft: theme.spacing(2)
  }
}
})
);

export default function Links() {
const classes = useStyles();

const [state, setState] = React.useState(true);

const handleClick = () => {
setState(!state);
};

return (
 <Typography className={classes.root}>
 <Link onClick={handleClick} tabIndex={0}>
    Link
 </Link>
 <Typography>Click on above link to display hidden content..</Typography>
    {state ? "" : "focus on Link using Tab key?"}
 </Typography>
 );
 }

Upvotes: 1

Views: 10595

Answers (2)

mdmundo
mdmundo

Reputation: 2276

Set component prop to button as follows:

export default function Links() {
  const classes = useStyles();

  const [state, setState] = React.useState(true);

  const handleClick = () => {
    setState(!state);
  };

  return (
    <Typography className={classes.root}>
      <Link onClick={handleClick} tabIndex={0} component="button">
        Link
      </Link>
    </Typography>
  );
}

Upvotes: 3

Gowtham Manthena
Gowtham Manthena

Reputation: 279

I have used onKeyPress attribute to achieve the click action through keyboard tab key without using component="button" or href like below.

function goToDetails(event, id) 
{
    if(event.key === 'Enter'){
        event.preventDefault();
    history.push(`/`);
    }
    else {
        event.preventDefault();
        history.push(`/`);
    }
}
<Link tabIndex={0} onKeyPress={(event) => goToDetails(event, row.id)}  onClick={(event) => goToDetails(event, row.id)}>
 Go to details
</Link>

Upvotes: 0

Related Questions