Listbox.Option render prop "active" doesn't work when Listbox.Options has static={true}

[tfilo]

Hello, I work on customized Listbox where options are always expanded. I used static prop on <Listbox.Options> tag to achieve that. But when I have static={true}, than render prop active on individual Listbox.Option is always false. Can you help me how to solve this ? Thanks.

Simplified code example:

<Listbox
   value={[]}
   onChange={() => void}
   multiple={true}
   as='div'
>
   <Listbox.Options static={true}>
      {options.map((o) => (
         <Listbox.Option
            key={o.id}
            className={({ active }) =>
               `${
                  active ? 'some classes when active' : 'some classes when not active'
               }`
            }
            value={o}
         >
            {o.name}
         </Listbox.Option>
      ))}
   </Listbox.Options>
</Listbox>

[lancechentw]

I'm trying to do the same thing. I think static is not the reason why active doesn't work, it's probably because activeOptionIndex is only set when certain events occur (most are bound to Listbox.Button).

headlessui/packages/@headlessui-react/src/components/listbox/listbox.tsx

Lines 153 to 158 in 1469b85

	[ActionTypes.OpenListbox](state) {
	if (state.dataRef.current.disabled) return state
	if (state.listboxState === ListboxStates.Open) return state
	// Check if we have a selected value that we can make active
	let activeOptionIndex = state.activeOptionIndex

My current hack is to leave Listbox.Button there, and have it autoFocus on component loaded, so when a user press arrow up, arrow down, space, or enter, the button's event set a value to activeOptionIndex.

 <Listbox
    value={[]}
    onChange={() => void}
    multiple={true}
    as='div'
 >
+   <Listbox.Button autoFocus></Listbox.Button>
    <Listbox.Options static={true}>
       {options.map((o) => (
          <Listbox.Option
             key={o.id}
             className={({ active }) =>
                `${
                   active ? 'some classes when active' : 'some classes when not active'
                }`
             }
             value={o}
          >
             {o.name}
          </Listbox.Option>
       ))}
    </Listbox.Options>
 </Listbox>