Listbox with DialogTrigger

[chrisphillers]

I am trying to use a Listbox with a DialogTrigger but facing some issues. It is likely this scenario hasn't been covered by the Spectrum team but wanted to ask if anyone else had got this working? I have a working example, however the styling is a little shaky and I wondered why this might be?

In the ListBox I have used an ActionButton within the DialogTrigger - see the example here:

https://codesandbox.io/s/react-spectrum-sandbox-tluip

I wondered if anyone had any pointers to help resolve the highlighting height issue?

Many thanks

[snowystinger]

Yeah, you don't have anything picking up the Slot in the ListBox https://codesandbox.io/s/react-spectrum-sandbox-forked-rcqik?file=/src/listbox.js See https://react-spectrum.adobe.com/react-spectrum/ListBox.html#complex-items and https://react-spectrum.adobe.com/react-spectrum/layout.html#slots
On another note, a ListBox can't have interactive components in a List Item, you should remove the ActionButtons and just render the item as the label, then use a handler on the ListBox for onSelectionChange, to change the state of the dialog being shown

[chrisphillers]

The perfect answer, really helpful and some great pointers to learn from, thanks very much @snowystinger