diff --git a/.changeset/fresh-spiders-push.md b/.changeset/fresh-spiders-push.md new file mode 100644 index 00000000000..48f5067f5f6 --- /dev/null +++ b/.changeset/fresh-spiders-push.md @@ -0,0 +1,5 @@ +--- +"@primer/react": patch +--- + +update SelectPanel Multi Select Modal story diff --git a/packages/react/src/SelectPanel/SelectPanel.features.stories.tsx b/packages/react/src/SelectPanel/SelectPanel.features.stories.tsx index 1147b1bbd74..0fa22f1d435 100644 --- a/packages/react/src/SelectPanel/SelectPanel.features.stories.tsx +++ b/packages/react/src/SelectPanel/SelectPanel.features.stories.tsx @@ -783,13 +783,15 @@ export const WithOnCancel = () => { export const MultiSelectModal = () => { const [initialSelection, setInitialSelection] = React.useState(items.slice(1, 3)) - const [selected, setSelected] = React.useState(initialSelection) + const [savedSelection, setSavedSelection] = React.useState(initialSelection) const [filter, setFilter] = React.useState('') const [open, setOpen] = useState(false) React.useEffect(() => { - if (!open) setInitialSelection(selected) // Save selection as initialSelection for next time + // Sync initialSelection with the last committed selection after the modal closes. + // onCancel uses initialSelection to discard unsaved changes made while the modal is open. + if (!open) setInitialSelection(selected) }, [open, selected]) const filteredItems = items.filter(item => item.text.toLowerCase().startsWith(filter.toLowerCase())) @@ -800,13 +802,18 @@ export const MultiSelectModal = () => { title="Select labels" placeholder="Select labels" subtitle="Use labels to organize issues and pull requests" - renderAnchor={({children, ...anchorProps}) => ( + renderAnchor={({...anchorProps}) => ( )} open={open} - onOpenChange={setOpen} + onOpenChange={(nextOpen, gesture) => { + setOpen(nextOpen) + if (!nextOpen && gesture === 'selection') { + setSavedSelection(selected) + } + }} items={filteredItems} selected={selected} onSelectedChange={setSelected}