diff --git a/projects/packages/forms/changelog/fix-forms-clear-selection-when-switching-tabs b/projects/packages/forms/changelog/fix-forms-clear-selection-when-switching-tabs new file mode 100644 index 0000000000000..8649257a58398 --- /dev/null +++ b/projects/packages/forms/changelog/fix-forms-clear-selection-when-switching-tabs @@ -0,0 +1,4 @@ +Significance: patch +Type: fixed + +Forms: reset the selection on tab switch diff --git a/projects/packages/forms/src/dashboard/components/inbox-status-toggle/index.tsx b/projects/packages/forms/src/dashboard/components/inbox-status-toggle/index.tsx index 352cc23a64a41..6bb8571dc67c0 100644 --- a/projects/packages/forms/src/dashboard/components/inbox-status-toggle/index.tsx +++ b/projects/packages/forms/src/dashboard/components/inbox-status-toggle/index.tsx @@ -44,7 +44,7 @@ export default function InboxStatusToggle( { onChange }: InboxStatusToggleProps const status = searchParams.get( 'status' ) || 'inbox'; const [ isSm ] = useBreakpointMatch( 'sm' ); - const { totalItemsInbox, totalItemsSpam, totalItemsTrash } = useInboxData(); + const { totalItemsInbox, totalItemsSpam, totalItemsTrash, setSelectedResponses } = useInboxData(); const statusTabs = [ { label: getTabLabel( __( 'Inbox', 'jetpack-forms' ), totalItemsInbox ), value: 'inbox' }, @@ -66,13 +66,13 @@ export default function InboxStatusToggle( { onChange }: InboxStatusToggleProps setSearchParams( prev => { const params = new URLSearchParams( prev ); params.set( 'status', newStatus ); - + params.delete( 'r' ); // Clear selected responses when changing tabs. return params; } ); - + setSelectedResponses( [] ); onChange( newStatus ); }, - [ isSm, status, setSearchParams, onChange ] + [ isSm, status, setSearchParams, onChange, setSelectedResponses ] ); return ( diff --git a/projects/packages/forms/src/dashboard/inbox/dataviews/index.js b/projects/packages/forms/src/dashboard/inbox/dataviews/index.js index 503e0a9b6e2c5..f0562728228c3 100644 --- a/projects/packages/forms/src/dashboard/inbox/dataviews/index.js +++ b/projects/packages/forms/src/dashboard/inbox/dataviews/index.js @@ -134,7 +134,8 @@ export default function InboxView() { setCurrentQuery( _queryArgs ); }, [ view, statusFilter, setCurrentQuery ] ); - const [ selection, setSelection ] = useState( selectedResponses?.split( ',' ) || EMPTY_ARRAY ); + const selection = selectedResponses?.split( ',' ) || EMPTY_ARRAY; + // We need to keep the valid selection item in state to be used in `export`. // We do this because a user can have in their selection either ids that // do not exist at all or ids that are not in the current data set. @@ -142,12 +143,13 @@ export default function InboxView() { const validSelectedIds = ( selection || [] ).filter( id => records?.some( record => getItemId( record ) === id ) ); + setSelectedResponses( validSelectedIds ); }, [ records, selection, setSelectedResponses ] ); + const [ sidePanelItem, setSidePanelItem ] = useState(); const onChangeSelection = useCallback( items => { - setSelection( items ); // Set the side panel item only when we are not on mobile. if ( ! isMobile ) { setSidePanelItem( @@ -157,8 +159,18 @@ export default function InboxView() { } setSearchParams( previousSearchParams => { const _searchParams = new URLSearchParams( previousSearchParams ); - if ( items.length ) { - _searchParams.set( 'r', items.join( ',' ) ); + const currentURLSelection = _searchParams.get( 'r' )?.split( ',' ) || []; + + // Filter out IDs from the current URL selection that are either already selected in the current view + // or already present in the current records, to avoid duplication when merging selections across pages. + const currentSelection = currentURLSelection.filter( + id => ! ( items.includes( id ) || records?.some( record => getItemId( record ) === id ) ) + ); + + // merge items with the current URL + const mergedItems = [ ...new Set( [ ...currentSelection, ...items ] ) ]; + if ( mergedItems.length ) { + _searchParams.set( 'r', mergedItems.join( ',' ) ); } else { _searchParams.delete( 'r' ); } diff --git a/projects/plugins/jetpack/changelog/fix-forms-clear-selection-when-switching-tabs b/projects/plugins/jetpack/changelog/fix-forms-clear-selection-when-switching-tabs new file mode 100644 index 0000000000000..41360ff5a1ac6 --- /dev/null +++ b/projects/plugins/jetpack/changelog/fix-forms-clear-selection-when-switching-tabs @@ -0,0 +1,4 @@ +Significance: patch +Type: bugfix + +Forms: reset the selection on tab switch in dashboard