acl-services / acl-services/paprika

<ListBox /> Better api for a fully controlled multiselect listbox with filter and footer

Aberta
#509 0 comentários 1 reação 0 responsáveis Ver no GitHub
High Priority ↑
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:
![image](https://user-images.githubusercontent.com/38733362/80763893-6044db00-8af4-11ea-9982-2af782148f9a.png)

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

Receba novas issues na sua caixa de entrada

Um resumo curto de issues do GitHub para quem está começando.