Unable to focus specific element with useRef hook

Question

I want to be able to use the 'Tab' key to skip to the next element. Everything works fine until I'm on react-date-picker. It keeps tabbing in a loop between (right arrow, left arrow, calendar, right arrow, left arrow, calendar) the arrows and the calendar display. However, I want it to skip to the next element when 'Tab' is pressed. I tried many ways, but I cannot escape from only this element to the next.

export const DescribeCargo = () => {
  const skipDatePickerRef = useRef<HTMLDivElement>()
  const onKeyDown = (e) => {
    if (e.key === 'Tab') {
      skipDatePickerRef?.current.focus()
      console.log('tab was pressed')
    }
  }

return (
<>
// some html elements
          <div
            onKeyDown={onKeyDown}
          >
            <DatePicker
              dropdownMode='select'
              open
              disabledKeyboardNavigation
              onChange={(date: Date) => {
                form.setValue('collectionDate', date.getTime() + '')
              }}
              minDate={new Date(parseInt(unixTimeDefault))}
              calendarStartDay={1}
              filterDate={isWeekday}
              selected={new Date(parseInt(collectionDate))}
            onKeyDown={onKeyDown}
            />
          </div>
          <div ref={skipDatePickerRef}>skip here</div>
</>
)}

I tried setting tab-index, and I tried using the useRef hook to give focus to the next element when 'Tab' is pressed in the DatePicker component. However nothing has worked so far.

What should I do ?

Answer 1

The div element has no tabIndex by default so you can't focus it.

<div ref={skipDatePickerRef} tabIndex="0">
  skip here
</div>