I have 3 buttons Cancel, Back, Continue respectively. when press tab key that should be going to Continue, Cancel, Back buttons.
How can we do that in React, Javascript?
Please refer https://codesandbox.io/s/crazy-ishizaka-cnr5k?file=/src/App.js
export default function App() {
return (
<div className="App">
<button tabIndex="2">submit 1</button>
<button tabIndex="3">submit 2</button>
<button tabIndex="1">submit 3</button>
</div>
);
}
this above code is'nt working as I expected. Please suggest efficient solution for this.
The first thing about the tabIndex is it would act weird for use if you want to jump directly to the buttons and inputs. After some researches about your problem, I have found out you have to do two things:
<!DOCTYPE html>
<html lang="en" style="all: initial;">
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<meta name="theme-color" content="#000000" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
<title>React App</title>
</head>
<body>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<div id="root"></div>
</body>
</html>I have changed the HTML tag and added the style in the second line
export default function App() {
return (
<div className="App" tabIndex={1}>
<button tabIndex={3}>submit 1</button>
<button tabIndex={4}>submit 2</button>
<button tabIndex={2}>submit 3</button>
</div>
);I have forked your codesandbox and you can access it with this link: https://codesandbox.io/s/dawn-hill-1br66?file=/src/App.js