Forms: clear selection when switching tabs (#45543)

* Remove selection on tab switching.

* Move the selection from the component state to the URL

* changelog

* Update projects/packages/forms/changelog/fix-forms-clear-selection-when-switching-tabs

Co-authored-by: Copilot <[email protected]>

* Update projects/packages/forms/src/dashboard/inbox/dataviews/index.js

Co-authored-by: Copilot <[email protected]>

* Update projects/packages/forms/src/dashboard/components/inbox-status-toggle/index.tsx

Co-authored-by: Copilot <[email protected]>

* Update projects/packages/forms/src/dashboard/inbox/dataviews/index.js

Co-authored-by: Copilot <[email protected]>

---------

Co-authored-by: Copilot <[email protected]>

Author: enejb

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

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 (

projects/packages/forms/src/dashboard/inbox/dataviews/index.js

@@ -135,20 +135,22 @@ 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.
 	useEffect( () => {
 		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(
@@ -158,8 +160,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' );
 				}

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