I have a totally simple React sandbox https://codesandbox.io/s/musing-glitter-wgj13s?file=/src/App.js:335-349 It's supposed for the button First to focus after clicking the Second one and vice versa. Unfortunately the blue border is not showing around the focused button. Is anybody able to explain why?
Edit: It seems to be the case just on Chrome (105.0.5195.125) and Firefox(104.0.2 (64-bit)). Works well on Safari(15.6.1 (17613.3.9.1.16)). I'm on MacOS Monterey 12.5.1
How do you know it is not working?
You have not added any onFocus properties on the second button to check if it is getting the focus or not. Try the below code and click on the first button. The console will have a log ("Second button is on focus!")
import React from "react";
import "./styles.css";
export default class App extends React.Component {
constructor(props) {
super(props);
this.firstRef = React.createRef();
this.secondRef = React.createRef();
}
handleFocus() {
console.log("Second button is on focus!"); // <-- This will be executed on 1st button click
}
render() {
return (
<div className="App">
<button
onClick={() => {
this.secondRef.current.focus();
}}
ref={this.firstRef}
style={{ backgroundColor: "lime" }}
>
<h1>First</h1>
</button>
<button
onClick={() => {
this.firstRef.current.focus();
}}
ref={this.secondRef}
style={{ backgroundColor: "yellow" }}
onFocus={this.handleFocus} // <-- Added on-focus property to 2nd button
>
<h1>Second</h1>
</button>
</div>
);
}
}