How to focus and select a checkbox using React ref?

Question

I have been looking around a method to correctly focus and select a checkbox in React code. The methods focus() and select() that I'm using in the example below are not working :

import React, { useRef } from "react";

export const HelloWorld = () => {
  const checkboxref = useRef(null);

  const handleOnClick = () => {
    checkboxref.current.focus();
    checkboxref.current.select();
  };

  return (
    <div>
      <button onClick={handleOnClick}>Focus</button>
      <input type="checkbox" ref={checkboxref} />
    </div>
  );
};

When I click on the button, my checkbox is not focused and not selected...

Any solution please ?

Thank you so much.

Answer 1

You don't need to create a separate function to handle onChange event

const checkboxref = useRef(null);

You can simply get the current value of the checkbox with:

checkboxref.current.checked 
// which returns a boolean

Answer 2

use this one it might help you. here I am using createRef instead of useRef and also uses the callback hook which ensures the availability of ref when you click the button.

import React,{createRef, useCallback} from 'react';


export const HelloWorld = () => {
  const checkboxref = createRef();

  const handleOnClick = useCallback(() => {
    const node = checkboxref.current;
    if(node){
     node.focus();
     node.select();
     }
  }, [checkboxref]);

  return (
    <div>
      <button onClick={handleOnClick}>Focus</button>
      <input type="checkbox" ref={checkboxref} />
    </div>
  );
};