acl-services / acl-services/paprika
<ListBox /> Better api for a fully controlled multiselect listbox with filter and footer
- Linguagem predominante
- JavaScript
- Estrelas
- 54
- Forks
- 10
- Merge médio
- 1d 12h
- PRs com merge (30d)
- 6
Descrição
# Feature request
## Is your feature request related to a problem?
In projects, we have lots of common case like a multiselect filter using paginated API and searching API to render the listbox options, and most of them are using ``.
Example like here:

When we have a listbox footer and the multiselect become explicit, if users click outside to close the popover, we should revert the listbox state to the previous state, like a Cancel action if users click the `Cancel` button in ``. When we dispatch the `cancel` action in listbox component, we should revert the state of `selectedOptions`.
Sometimes we have to use a fully controlled listbox, because we need to refresh the list of options each time when searching or fetching more data. Using a fully controlled listbox with footer means I have to sync the `selectedOptions`, between my application and the listbox component. Currently there's no way to sync the internal state of listbox from outside, I can only render the `ListBox.Option` component by a controlled way like ``, but that doesn't mean I updated the internal state of listbox. This is causing some weird bugs, like sometimes listbox label cannot find the selected item, because the `options` are updated, but `selectedIds` didn't.
## Describe the solution you'd like
First I wish in my app I can remove and add my ``, `` without any issues
Then, I wish it would be easier to use a multiselect listbox like this:
```jsx
'call my API and refresh the option list'}}/>
{
myOptions.map(option => )
}
'I can revert my option list'}
/>
```
If I can get the previous state from listbox component, I don't need to cache it in my app, it will save lots of effort in my application side.
## Describe alternatives you've considered
## Additional context
Guia de contribuição
Nenhum guia de contribuição indexado para este repositório
Direção de pesquisa
Start by locating the `ListBox` component source and the related `` and `` logic where `selectedOptions` and popover open/close state are handled. Review how ``/`` rendering is wired to selection state in current multiselect mode, then run the ListBox-focused tests or demo/story entry points for cancel and outside-click behavior. Done means the listbox supports external synchronization for refreshed options and a cancel/close path reliably restores prior selection and label rendering with footer actions.
Escrita pelo modelo de indexação a partir do texto da issue.
Avaliação
- Stack de tecnologia
- javascript, react
- Domínio
- frontend
- Tipo de issue
- Funcionalidade
- Dificuldade
- 3/5
- Tempo estimado
- Meio dia
- Status de atividade
- Estagnada
- Clareza
- Razoavelmente clara
- Facilidade para iniciantes
- 44/100