Custom sticky header and footer for popover and tray

[jsgiant]

🙋 Feature Request

We have a use case where we need to add a sticky footer without affecting the Listbox layout and scroll. We've explored the useListboxLayout and some other hooks that are involved in layout. But didn't help us. Is there any specific thing that we can use for our use case? Thanks!

🤔 Expected Behavior

Should be able to add a sticky header and footer in the popover and tray without affecting the layout of the Listbox.

😯 Current Behavior

💁 Possible Solution

A custom item or type of node can be added where we can use it to add a custom header or footer and it shouldn't affect the current layout structure and calculation of the layout dimensions.

🔦 Context

💻 Examples

You can see our use case in the below sandbox:

https://codesandbox.io/s/react-spectrum-listbox-usecase-oztcyl?file=/src/App.tsx:0-34

[snowystinger]

What would header and footer have? Would they be interactive? Purely decorative? Can you make the example a bit more concrete?

[jsgiant]

Hi @snowystinger, Both the footer and header should be interactive and we should be able to customize them without affecting the popover and list box layouts. I've updated one of our use cases in the same code sandbox where users should be able to add a new option if it is not present in the list.

Thanks!

[snowystinger]

Ok, I understand now. We've come across this ask for ComboBoxes before.
First, the easy answer. Our solution is that our ComboBoxes allow for custom input. You can see this in https://react-spectrum.adobe.com/react-spectrum/ComboBox.html#custom-value

Now, for the complicated answer.
This is a very difficult pattern to implement, if it's even possible. It would require implementing the grid pattern https://www.w3.org/TR/wai-aria-practices/examples/combobox/grid-combo.html for virtual focus navigation within the popover.

I say it may not be possible because even if you do this, focus should remain in the input, and won't be on the button you want to add. This changes what "Enter" does, and "Enter" has a described behavior in the aria page. I also don't know if it would read the role of the button off correctly for assistive technologies, aria-activedescendent is still quite new and has a number of issues that we work around for you with our ComboBox hooks.

These kinds of composite widgets are quite tricky and are being worked on by the aria working group. You can follow some of the discussion around this very use case here: w3c/aria#1454 & w3c/aria#1440

If the above solutions don't work for you, you could drop the pretext of a combobox and instead open a dialog with a list and a form for adding items to the list.

[jsgiant]

Okay. Thanks for the information, we'll re-think this and will try to achieve accessibility along with a better user experience with a new design maybe.