Formik, ReactJs, set focus and remove focus when check and uncheck a checkbox

Question

I'm using a formik custom selector and a normal html checkbox. i need to write code to set focus CustomMultiselect when i check the checkbox and remove the focus when i uncheck.

I tried to use UseRef too. but useRef always gives undefined.

const handleAllLicenseCheckBox = prop => {
       if(true)
     // Code to focus the customSELECT
      else 
     //Code to remove focus

}

<CustomMultiSelect  
 name="question"
 options={options}
 value={valueList}
</CustomMultiSelect>

<input
onClick={() =>
handleCheckBox(props)
}
 type="checkbox"
 name="allcheckbox"
checked={isAllLicenseCheckBox}/>

Answer 1

According to css-tricks ,:focus-visible is the keyboard-only version of :focus .

Change

input:focus {...}

To

input:focus-visible {...}

This supports accessibility by hiding focus on mouse interactions but still show focus on keyboard interactions.

Note caniuse