Реактор и сосредоточить внимание на повторной визуализации

Question

Сценарий

Я использую библиотеку Reactour для создания руководства на моем веб-сайте.Библиотека позволяет мне взаимодействовать с выделенными компонентами, что является желаемым поведением.Однако в моих полях ввода есть атрибут onBlur, который обновляет состояние в родительском компоненте, таким образом повторно визуализируя дочерний элемент (компонент, в котором находятся поля ввода).

Проблема

проблема в том, что этот повторный рендеринг испортил focus, и пользователь не может «переходить» между полями (когда учебник открыт).Похоже, что компонент Reactour получает фокус после повторного рендеринга, хотя в его компоненте по умолчанию установлено значение tabIndex="-1".

Мой подход

Я пытался установить явноеtabIndex свойств, но это не сработало.

Я думал о прослушивателе onKeyDown, проверьте, нажата ли клавиша tab , и "вручную" управляйте focusмежду полями, но это кажется слишком странным и грязным, учитывая, что в моей форме много полей.

---

Я сделал CodeSandbox здесь , чтобы воспроизвести ошибку.Вы заметите, что можете переключаться между входами, когда Учебное пособие закрыто, но нажатие кнопки «Начать тур» испортит поведение tabIndex.

Есть идеи?

Answer 1

Просто для справки, это похоже на проблему с Reactour, и она была зарегистрирована здесь .Надеюсь, это будет исправлено в ближайшее время.

На данный момент, в качестве обходного пути, моим решением было вручную установить tabIndex компонентов Reactour во время инициализации:

setTimeout(() => {
    const elements = document.querySelectorAll("#___reactour button");
    elements.forEach((el) => (el.tabIndex = -1));
}, 100);

timeoutнеобходимо, поскольку для отображения элементов на экране требуется немного времени.