Порядок табуляции в реагирующих компонентах?

Question

У меня есть Code Sandbox здесь , который демонстрирует, что я хочу сделать.

Когда пользователь нажимает кнопку, открывается текстовый ввод и ему предоставляется фокус.

Для этого я использую ссылку и задаю ей фокус, что нормально:

  //When user clicks button, show input
  const handleClick = useCallback(() => {
    setShowInput(true);
  }, []);  

  useEffect(() => {
    if (showInput && inputRef.current) {
      inputRef.current.focus();
    }
  }, [showInput]);

Когда пользователь вкладывает из текстового поля, я хочуфокус, чтобы вернуться на эту кнопку.

В коде, который я имею здесь, я достигаю этого также с помощью ссылки и фокусировки на кнопке.

  //When user exits input, unshow input
  //Also, need to tab to button if it was a tab button press. 
  const handleInputBlur = useCallback(() => {
    setShowInput(false);
    if (buttonRef.current) {
      buttonRef.current.focus();
    }
  }, []);

Однако проблема заключается в том, что если пользователь вместо этого использует свою мышь , чтобы нажать, скажем, другую кнопку, то фокус все равно отдается кнопке триггера.

То, что я хотел бы сделать, это определить некоторый порядок табуляции для этих компонентов, который будет:

TextField => Кнопка триггера => Другие кнопки

Однако я не хочу жестко кодировать индексы табуляции в моем компоненте, так как это, вероятно, не будет хорошо работать с приложением в целом?

Есть ли элегантное решение для реакции на это?

Answer 1

Лучший ответ здесь заключается в том, что если вы хотите, чтобы ваш порядок вкладок был TextField => Trigger Button => Other Button, то HTML-рендеринг должен быть в этом порядке.

Затем вы можете использовать CSS для изменения визуального порядка.

.container {
 display: flex; 
 border: solid 1px black; 
}

 button {
 margin: 1em; 
 padding: 1em; 
 }  
 
 .order-1 {
    order: 1; 
 }
  
 .order-2 {
    order: 2; 
 } 
 
 .order-3 {
    order: 3; 
 }
 
 .order-4 {
    order: 4; 
 }

<div class = "container"> 
  <button class ="order-4"> 1</button> 
  <button class = "order-2"> 2</button> 
  <button class = "order-3"> 3</button> 
  <button class ="order-1"> 4</button> 
</div>