acl-services / acl-services/paprika

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

未關閉
#509 0 則留言 1 個 reaction 已指派 0 人 在 GitHub 檢視
High Priority ↑
主要語言
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:
![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

貢獻指南

這個儲存庫沒有索引到貢獻指南

研究方向

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

把新 issue 寄到你的電子郵件信箱

精選適合新手參與的 GitHub issue 摘要。