如何在反应选择中禁用自动对焦？

Question

我有一个来自“react-select”库的选择框。我需要多选而不进行换行，如我在沙箱中所示。但每当我删除其中一个芯片或单击输入时，它就会自动对焦到我不想要的最后一个。它需要始终保持在开始状态。我该怎么做 ？感谢您的帮助。

沙箱：https://codesandbox.io/p/sandbox/react-select-blur-onchange-forked-5lt4y5?file=%2Fsrc%2FApp.js%3A15%2C31

我尝试使用 flexbox justify-content start 等来做到这一点，但它对我不起作用。

Answer 1

有一个很好的函数，叫做

scrollIntoView

。您所要做的就是弄清楚如何获取对您想要可见的选项的引用。当你拥有它时，你可以像这样使用它：

optionRef.scrollIntoView()

此外，如果您真的坚持不换行，您可以做的是向输入添加滚动，因为现在如果某些选定选项超出了输入的宽度，则无法看到它们：

        valueContainer: (styles) => ({
          ...styles,
          flexWrap: "nowrap",
          overflow: "auto",
          minHeight: 40,
        }),

overflow: 'auto'

+

minHeight

来补偿它。