Reactour 和焦点问题重新渲染
Reactour and focus issues on re-render
场景
我正在使用 Reactour 库在我的网站上创建指导教程。该库允许我与突出显示的组件进行交互，这是所需的行为。但是，我的输入框有一个 onBlur 属性，可以更新父组件中的状态，从而重新呈现子组件（输入框所在的组件）。
问题
问题是此重新呈现弄乱了 focus 并且用户无法在字段之间 "tab"（当教程打开时）。似乎 Reactour 组件在重新渲染后获得了焦点，即使它们在组件中默认设置了 tabIndex="-1"。
我的方法
我尝试设置显式 tabIndex 属性，但没有成功。
我想过有一个onKeyDown监听器，检查按下的键是否是tab和"manually"控制字段之间的focus，但考虑到我的表单中有很多字段，这似乎太老套和凌乱了。
我制作了一个 CodeSandbox here 来重现该错误。您会注意到，当教程关闭时，您可以在输入之间切换，但单击 "Start Tour" 按钮会使 tabIndex 行为混乱。
有什么想法吗？
仅供参考，这似乎是 Reactour 的问题，已记录 here。希望它会尽快修复。
目前，作为解决方法，我的解决方案是在初始化期间手动设置 Reactour 组件的 tabIndex：
setTimeout(() => {
const elements = document.querySelectorAll("#___reactour button");
elements.forEach((el) => (el.tabIndex = -1));
}, 100);
timeout 是必需的，因为元素显示在屏幕上需要一点时间。
场景
我正在使用 Reactour 库在我的网站上创建指导教程。该库允许我与突出显示的组件进行交互，这是所需的行为。但是，我的输入框有一个 onBlur 属性，可以更新父组件中的状态，从而重新呈现子组件（输入框所在的组件）。
问题
问题是此重新呈现弄乱了 focus 并且用户无法在字段之间 "tab"（当教程打开时）。似乎 Reactour 组件在重新渲染后获得了焦点，即使它们在组件中默认设置了 tabIndex="-1"。
我的方法
我尝试设置显式 tabIndex 属性，但没有成功。
我想过有一个onKeyDown监听器，检查按下的键是否是tab和"manually"控制字段之间的focus，但考虑到我的表单中有很多字段，这似乎太老套和凌乱了。
我制作了一个 CodeSandbox here 来重现该错误。您会注意到，当教程关闭时，您可以在输入之间切换，但单击 "Start Tour" 按钮会使 tabIndex 行为混乱。
有什么想法吗？
仅供参考，这似乎是 Reactour 的问题，已记录 here。希望它会尽快修复。
目前，作为解决方法，我的解决方案是在初始化期间手动设置 Reactour 组件的 tabIndex：
setTimeout(() => {
const elements = document.querySelectorAll("#___reactour button");
elements.forEach((el) => (el.tabIndex = -1));
}, 100);
timeout 是必需的，因为元素显示在屏幕上需要一点时间。