title: Change the order of the focused elements in final-form-focus
body: <p>I'm using <code>final-form-focus</code> with <code>react-final-form</code> to focus on first error, if there are any validation errors on submit. I have a custom <code>react-select</code> component, so I'm using a custom findInput method like this:</p>
  
  <pre><code>const findInput = (inputs, errors) =&gt;
    inputs.find(input =&gt; {
      const name = input.name || input.dataset.name;
      return name &amp;&amp; getIn(errors, name);
    });
  
  const getFormInputs = name =&gt; () =&gt; {
    if (typeof document === "undefined") {
      return [];
    }
    const form = document.forms[name];
    const inputs = form &amp;&amp; form.length ? Array.prototype.slice.call(form) : []; // cast cheat to get from HTMLFormElement children to FocusableInput
  
    // So far this is just copy-pasted from final-form-focus.
    // It would return inputs here, but here is the magic:
  
    const selectFields = Array.prototype.slice.call(
      document.querySelectorAll("[data-select]")
    );
  
    const allInputs = inputs.concat(selectFields);
  
    return allInputs;
  };
  
  const focusOnError = focusDecorator(getFormInputs("pay-form"), findInput);
  </code></pre>
  
  <p>My select component is wrapped in a div and focused using ref like this:</p>
  
  <pre><code>const SelectInput = ({
    input,
    meta,
    initialValue,
    ...rest
  }) =&gt; {
    const selectRef = React.createRef();
  
    const setFocus = () =&gt; {
      selectRef.current.focus();
    };
    return (
      &lt;div&gt;
        &lt;div
          className="input-wrapper"
          tabIndex="0"
          data-select
          data-name={input.name}
          onFocus={setFocus}
        &gt;
          &lt;Select
            {...rest}
            ref={selectRef}
            onChange={value =&gt; input.onChange(value)}
            value={input.value}
            openMenuOnFocus={true}
          /&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    );
  };
  </code></pre>
  
  <p>But the select is only focused at the end of the line, after all other components. Here is my <a href="https://codesandbox.io/s/focus-on-error-w-react-select-8ljls?fontsize=14" rel="nofollow noreferrer">codesandbox</a>. Is there any way to change the order of the focused elements in the same way as they appear in the document?</p>