如何自动对焦 headlessUi（顺风）选择？

Question

当我打开一页时，我需要已经打开选择。我使用这个 tailwindcss select

我试过这个

<Listbox value={selectedPerson} onChange={setSelectedPerson}>
  //Listbox.Button has a prop called autoFocus
  <Listbox.Button autoFocus={true}>{selectedPerson.name}</Listbox.Button>
  <Listbox.Options>
    {people.map((person) => (
      <Listbox.Option
        key={person.id}
        value={person}
        disabled={person.unavailable}
      >
        {person.name}
      </Listbox.Option>
    ))}
  </Listbox.Options>
</Listbox>

“自动对焦”道具存在，但似乎不起作用。有什么建议吗？

Answer 1

该autoFocus道具仅聚焦 Listbox 组件，因此您只能点击enter或space打开选项菜单，但如果您想在组件安装时打开选项菜单，您可以模拟单击 ListBox.Button 组件，这将打开您的选项菜单。

const buttonRef = useRef(null);

useEffect(() => {
  if (buttonRef.current) {
    buttonRef.current.click();
  }
}, [])

<Listbox value={selectedPerson} onChange={setSelectedPerson}>
  <Listbox.Button ref={buttonRef} autoFocus={true}>{selectedPerson.name}</Listbox.Button>
  <Listbox.Options>
    {people.map((person) => (
      <Listbox.Option
        key={person.id}
        value={person}
        disabled={person.unavailable}
      >
        {person.name}
      </Listbox.Option>
    ))}
  </Listbox.Options>
</Listbox>