使用useRef无法聚焦指定元素，react-date-picker Tab键循环问题

核心问题 #

react-date-picker内部的箭头按钮、日期单元格等元素会默认捕获Tab事件，即便设置了disabledKeyboardNavigation，也可能没完全阻断内部的Tab循环逻辑；另外你之前的onKeyDown未阻止默认事件，导致组件自带的Tab行为优先执行，自定义聚焦逻辑失效。

具体解决方案 #

1. 阻止默认Tab行为+手动聚焦目标元素 #

修改onKeyDown函数，先阻止事件默认行为，同时确保目标元素可聚焦（div默认不可聚焦，需添加tabIndex）：

export const DescribeCargo = () => {
  const skipDatePickerRef = useRef<HTMLDivElement>(null)

  const onKeyDown = (e: React.KeyboardEvent) => {
    if (e.key === 'Tab') {
      e.preventDefault(); // 阻断组件内部的Tab默认逻辑
      if (skipDatePickerRef.current) {
        skipDatePickerRef.current.tabIndex = -1; // 设为-1允许代码聚焦，且不会被Tab主动选中
        skipDatePickerRef.current.focus();
      }
    }
  }

  return (
    <>
      {/* 其他页面元素 */}
      <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>
    </>
  )
}

2. 通用方案：自动聚焦下一个可聚焦元素 #

如果不想硬编码目标元素，可以自动查找页面中下一个可聚焦元素：

const onKeyDown = (e: React.KeyboardEvent) => {
  if (e.key === 'Tab') {
    e.preventDefault();
    const currentElement = document.activeElement;
    if (!currentElement) return;

    // 筛选所有可聚焦元素
    const focusableElements = Array.from(
      document.querySelectorAll(
        'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
      )
    );
    const currentIndex = focusableElements.indexOf(currentElement);
    // 跳转到下一个，若为最后一个则回到开头
    const nextIndex = (currentIndex + 1) % focusableElements.length;
    focusableElements[nextIndex].focus();
  }
}

3. 组件属性优化 #

确认disabledKeyboardNavigation是否生效，部分版本需配合calendarFocus强制日历不获取焦点：

<DatePicker
  // 其他属性保持不变
  disabledKeyboardNavigation
  calendarFocus={null}
/>

关键注意事项 #

• 目标元素必须可聚焦：div默认不可聚焦，需添加tabIndex="-1"或tabIndex="0"，前者允许代码聚焦但不会被Tab主动选中，后者会被Tab纳入跳转序列。
• 必须调用e.preventDefault()：否则组件内部的Tab事件逻辑会优先执行，自定义聚焦逻辑无法生效。

内容的提问来源于stack exchange，提问作者user20948241