如何为Headless UI（Tailwind）的Listbox选择器设置自动聚焦默认打开

解决方法 #

你使用的autoFocus属性作用仅为让按钮获得输入焦点，和下拉框是否展开没有关联，自然无法实现默认展开的效果。Headless UI的Listbox支持受控模式，你只要手动接管它的展开状态即可：

1. 先声明状态用来控制下拉框显隐，初始值设为true
2. 给Listbox组件绑定open和onOpenChange属性关联你声明的状态

示例代码如下：

import { useState } from 'react'
import { Listbox } from '@headlessui/react'

// 你的组件逻辑
const YourComponent = () => {
  const [selectedPerson, setSelectedPerson] = useState(people[0])
  // 新增控制下拉展开的状态，初始为true即默认展开
  const [isListboxOpen, setIsListboxOpen] = useState(true)

  return (
    <Listbox 
      value={selectedPerson} 
      onChange={setSelectedPerson}
      // 绑定控制状态
      open={isListboxOpen}
      onOpenChange={setIsListboxOpen}
    >
      <Listbox.Button>{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>
  )
}

如果需要在默认展开的同时让第一个可选项获得焦点，可以给对应Listbox.Option加上autoFocus属性即可。

内容的提问来源于stack exchange，提问作者Loudrous