acl-services / acl-services/paprika
<ListBox /> Better api for a fully controlled multiselect listbox with filter and footer
- 主要語言
- JavaScript
- 星號
- 54
- 分支
- 10
- 平均合併
- 1 天 12 小時
- 30 天內合併 PR
- 6
描述
# 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
貢獻指南
這個儲存庫沒有索引到貢獻指南
研究方向
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.
由索引模型根據 Issue 內容生成。
評估
- 技術堆疊
- javascript, react
- 領域
- frontend
- Issue 類型
- 功能
- 難度
- 3/5
- 預估耗時
- 半天
- 活躍度
- 停滯
- 描述清晰度
- 基本清楚
- 新手友好度
- 44/100