title: Tab order in react components?
body: <p>I have a <a href="https://codesandbox.io/s/affectionate-sky-dkjwd" rel="nofollow noreferrer">Code Sandbox here</a> that demonstrates what I want to do. </p>
  
  <p>When the user presses a button, a text input is revealed and is given focus. </p>
  
  <p>To do this, I use a ref and give it focus, which is fine: </p>
  
  <pre><code>  //When user clicks button, show input
    const handleClick = useCallback(() =&gt; {
      setShowInput(true);
    }, []);  
  
    useEffect(() =&gt; {
      if (showInput &amp;&amp; inputRef.current) {
        inputRef.current.focus();
      }
    }, [showInput]);
  </code></pre>
  
  <p>When the user <em>tabs</em> out of the text field, I want the focus to be back on that button. </p>
  
  <p>In the code I have here, I achieve this also by using a  ref and giving focus to the button. </p>
  
  <pre><code>  //When user exits input, unshow input
    //Also, need to tab to button if it was a tab button press. 
    const handleInputBlur = useCallback(() =&gt; {
      setShowInput(false);
      if (buttonRef.current) {
        buttonRef.current.focus();
      }
    }, []);
  
  </code></pre>
  
  <p>However, the problem is if the user instead <em>uses their mouse</em> to click say, the other button, then focus is still given to the trigger button. </p>
  
  <p>What I'd like to be able to do is define some tab order for these components, that would be: </p>
  
  <p>TextField => Trigger Button => Other Button </p>
  
  <p>However, I don't want to hard code tab indexes into my component, as that would likely not play well with the application as a whole? </p>
  
  <p>Is there an elegant react solution to this? </p>