Изменить порядок фокусируемых элементов в final-form-focus

Question

Я использую final-form-focus с react-final-form, чтобы сосредоточиться на первой ошибке, если есть какие-либо ошибки проверки при отправке. У меня есть пользовательский компонент react-select, поэтому я использую пользовательский метод findInput, например, такой:

const findInput = (inputs, errors) =>
  inputs.find(input => {
    const name = input.name || input.dataset.name;
    return name && getIn(errors, name);
  });

const getFormInputs = name => () => {
  if (typeof document === "undefined") {
    return [];
  }
  const form = document.forms[name];
  const inputs = form && 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);

Мой компонент select обернут в div и фокусируется с использованием ref, как это:

const SelectInput = ({
  input,
  meta,
  initialValue,
  ...rest
}) => {
  const selectRef = React.createRef();

  const setFocus = () => {
    selectRef.current.focus();
  };
  return (
    <div>
      <div
        className="input-wrapper"
        tabIndex="0"
        data-select
        data-name={input.name}
        onFocus={setFocus}
      >
        <Select
          {...rest}
          ref={selectRef}
          onChange={value => input.onChange(value)}
          value={input.value}
          openMenuOnFocus={true}
        />
      </div>
    </div>
  );
};

Но выбор фокусируется только на конце строки, после всех остальных компонентов. Вот мои коды и коробка . Есть ли способ изменить порядок выделенных элементов так же, как они отображаются в документе?

Answer 1

Похоже, нет способа установить атрибут name на <input/> с помощью React-Select, но вы можете установить id с помощью innerId.