I have to create my own date picker (for training project, not by choice). I want to display my date picker when I focus the input, and hide it when I lose focus (like any date picker or input with date type attribut) .

I render it conditionally by storing a boolean into my state. I use the onFocus and onBlur methods to launch a toggle function.

It works, but unfortunately, onBlur triggered when a click anywhere in my date picker too. How can I "connect" my picker to the input so that he understands that this element "belongs to him" and should not take away the focus

I tried this at different places without any convincing result:

onClick={() => input.current.focus()

Code

const DateInput = () => {
  [...]
  const input = useRef(null)  
  const [displayContainer, setDisplay] = useState(false)
  
  const display = () => {
    setDisplay(!displayContainer) 
  }

  [...]

  return (
    <>
      <label htmlFor="date-of-birth">Date of Birth</label>
      <input
        id="date-of-birth"
        required
        defaultValue="1983-06-18"
        onFocus={display}
        onBlur={display}
        ref={input}
      />
      {displayContainer && (
        <div className="container">
          <div className="datepicker">
          [...lot of buttons and other stuff...]
       )}
    </>
  )
}

export default DateInput 

Thanks in advance