-1

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

Justin Case
  • 1
  • 2

1 Answers1

0

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>
    );
  }
}
Hemant Singh Bisht
  • 117
  • 1
  • 7
  • Thanks for your response, Hemant! I don't see a blue line around, that's how I know. It looks like issue is specific to Chrome and Firefox for me. I see it's working on Safari. – Justin Case Sep 22 '22 at 08:43