Repository navigation
Custom sticky header and footer for popover and tray聽#3020
Description
馃檵 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
Activity
snowystinger commentedon Apr 11, 2022
What would header and footer have? Would they be interactive? Purely decorative? Can you make the example a bit more concrete?
jsgiant commentedon Apr 14, 2022
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 commentedon Apr 14, 2022
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 commentedon Apr 18, 2022
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.