React how to use refs to focus/blur?

Question

I'm reading the React documentation from Reactjs.org but it doesn't seem to be working for what I want to do.

I want to render a component with nested divs. Upon clicking each of its nested divs, it turns into an input. Upon clicking outside of the specific div, it transforms the input back into a div.

I wanted to use refs with blur/focus to achieve this but I cannot seem to figure out how to get it to work.

This is what my component looks like so far, which is a child component:

constructor(props) {
    super(props);
    this.textInput = React.createRef();
}
focusRef = () => {
    this.textInput.current.focus();
}
focusEvent = () => {
    console.log("focus event.");
}
render() {
    let item = <div
        className="item-class"
        ref={this.textInput}
        onFocus={this.showIt}
        onClick={this.focusRef}>Item Name</div>
    return(<div>{item}</div>)
}

Looking at the sample code provided by react.js.org, I'm wondering why there is no onFocus event. Is that not required? How else will an event be triggered when the element receives focus? In my code, focusRef is triggered but focusEvent is not, which is also something I can't figure out. Secondly, how can I detect blur/losing focus, so I can swap my input back to a div? Lastly, I am confused as to how focus/blur events that swap an element between div and input can work with rendering, won't I need to rerender every time this swap occurs, AKA every time an element receives/loses focus? Doesn't that require needing to maintain focus of the elements (or lack thereof) between renders?

I would prefer a solution that does not involve hooks, if possible.

Answer 1

In order for a div element to be focusable it needs to be made interactable. Add a tab index to the div so it can be given focus.

function App() {
  return (
    <div className="App">
      <div 
        tabIndex={0} 
        onFocus={() => console.log('focus')} 
        onBlur={() => console.log('blur')}
      >
        Click or tab to me!
      </div>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  rootElement
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.13.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.1/umd/react-dom.production.min.js"></script>
<div id="root"></div>

Here is a toggleable/focusable div/input. It uses state to hold whether or not a div or input should be rendered, and a ref and componentDidUpdate method to refocus on the input after switching up the view.

class App extends React.Component {
  textInputRef = React.createRef();

  state = {
    isInput: false,
    value: "test"
  };

  componentDidUpdate() {
    const { isInput } = this.state;
    isInput && this.textInputRef.current.focus();
  }

  handleFocus = () => {
    console.log("focus");
    this.setState({ isInput: true });
  };

  handleBlur = () => {
    console.log("blur");
    this.setState({ isInput: false });
  };

  handleChange = (e) => this.setState({ value: e.target.value });

  render() {
    const { isInput, value } = this.state;
    return (
      <div className="App">
        {isInput ? (
          <input
            type="text"
            ref={this.textInputRef}
            value={value}
            onBlur={this.handleBlur}
            onChange={this.handleChange}
          />
        ) : (
          <div tabIndex={0} onFocus={this.handleFocus}>
            {value}
          </div>
        )}
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  rootElement
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.13.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.1/umd/react-dom.production.min.js"></script>
<div id="root"></div>