Merge branch 'clear-search-behavior' into 'develop'

Do not reset tab/searched account when clearing search input

See merge request soapbox-pub/soapbox!1781

app/soapbox/actions/search.ts

@@ -8,9 +8,10 @@ import type { SearchFilter } from 'soapbox/reducers/search';
 import type { AppDispatch, RootState } from 'soapbox/store';
 import type { APIEntity } from 'soapbox/types/entities';
 
-const SEARCH_CHANGE = 'SEARCH_CHANGE';
+const SEARCH_CHANGE        = 'SEARCH_CHANGE';
-const SEARCH_CLEAR  = 'SEARCH_CLEAR';
+const SEARCH_CLEAR         = 'SEARCH_CLEAR';
-const SEARCH_SHOW   = 'SEARCH_SHOW';
+const SEARCH_SHOW          = 'SEARCH_SHOW';
+const SEARCH_RESULTS_CLEAR = 'SEARCH_RESULTS_CLEAR';
 
 const SEARCH_FETCH_REQUEST = 'SEARCH_FETCH_REQUEST';
 const SEARCH_FETCH_SUCCESS = 'SEARCH_FETCH_SUCCESS';
@@ -28,7 +29,11 @@ const changeSearch = (value: string) =>
   (dispatch: AppDispatch) => {
     // If backspaced all the way, clear the search
     if (value.length === 0) {
-      return dispatch(clearSearch());
+      dispatch(clearSearchResults());
+      return dispatch({
+        type: SEARCH_CHANGE,
+        value,
+      });
     } else {
       return dispatch({
         type: SEARCH_CHANGE,
@@ -41,6 +46,10 @@ const clearSearch = () => ({
   type: SEARCH_CLEAR,
 });
 
+const clearSearchResults = () => ({
+  type: SEARCH_RESULTS_CLEAR,
+});
+
 const submitSearch = (filter?: SearchFilter) =>
   (dispatch: AppDispatch, getState: () => RootState) => {
     const value = getState().search.value;
@@ -167,6 +176,7 @@ export {
   SEARCH_CHANGE,
   SEARCH_CLEAR,
   SEARCH_SHOW,
+  SEARCH_RESULTS_CLEAR,
   SEARCH_FETCH_REQUEST,
   SEARCH_FETCH_SUCCESS,
   SEARCH_FETCH_FAIL,
@@ -177,6 +187,7 @@ export {
   SEARCH_ACCOUNT_SET,
   changeSearch,
   clearSearch,
+  clearSearchResults,
   submitSearch,
   fetchSearchRequest,
   fetchSearchSuccess,

app/soapbox/features/compose/components/search.tsx

@@ -9,6 +9,7 @@ import { useHistory } from 'react-router-dom';
 import {
   changeSearch,
   clearSearch,
+  clearSearchResults,
   setSearchAccount,
   showSearch,
   submitSearch,
@@ -72,7 +73,7 @@ const Search = (props: ISearch) => {
     event.preventDefault();
 
     if (value.length > 0 || submitted) {
-      dispatch(clearSearch());
+      dispatch(clearSearchResults());
     }
   };
 

app/soapbox/features/compose/components/search_results.tsx

@@ -2,7 +2,7 @@ import classNames from 'clsx';
 import React, { useEffect, useRef } from 'react';
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 
-import { clearSearch, expandSearch, setFilter } from 'soapbox/actions/search';
+import { expandSearch, setFilter, setSearchAccount } from 'soapbox/actions/search';
 import { fetchTrendingStatuses } from 'soapbox/actions/trending_statuses';
 import Hashtag from 'soapbox/components/hashtag';
 import IconButton from 'soapbox/components/icon_button';
@@ -43,7 +43,7 @@ const SearchResults = () => {
 
   const handleLoadMore = () => dispatch(expandSearch(selectedFilter));
 
-  const handleClearSearch = () => dispatch(clearSearch());
+  const handleUnsetAccount = () => dispatch(setSearchAccount(null));
 
   const selectFilter = (newActiveFilter: SearchFilter) => dispatch(setFilter(newActiveFilter));
 
@@ -196,7 +196,7 @@ const SearchResults = () => {
     <>
       {filterByAccount ? (
         <HStack className='mb-4 pb-4 px-2 border-solid border-b border-gray-200 dark:border-gray-800' space={2}>
-          <IconButton iconClassName='h-5 w-5' src={require('@tabler/icons/x.svg')} onClick={handleClearSearch} />
+          <IconButton iconClassName='h-5 w-5' src={require('@tabler/icons/x.svg')} onClick={handleUnsetAccount} />
           <Text>
             <FormattedMessage
               id='search_results.filter_message'

app/soapbox/reducers/search.ts

@@ -18,6 +18,7 @@ import {
   SEARCH_EXPAND_REQUEST,
   SEARCH_EXPAND_SUCCESS,
   SEARCH_ACCOUNT_SET,
+  SEARCH_RESULTS_CLEAR,
 } from '../actions/search';
 
 import type { AnyAction } from 'redux';
@@ -105,6 +106,13 @@ export default function search(state = ReducerRecord(), action: AnyAction) {
       return state.set('value', action.value);
     case SEARCH_CLEAR:
       return ReducerRecord();
+    case SEARCH_RESULTS_CLEAR:
+      return state.merge({
+        value: '',
+        results: ResultsRecord(),
+        submitted: false,
+        submittedValue: '',
+      });
     case SEARCH_SHOW:
       return state.set('hidden', false);
     case COMPOSE_REPLY:
@@ -123,7 +131,13 @@ export default function search(state = ReducerRecord(), action: AnyAction) {
     case SEARCH_EXPAND_SUCCESS:
       return paginateResults(state, action.searchType, action.results, action.searchTerm);
     case SEARCH_ACCOUNT_SET:
-      if (!action.accountId) return state.set('accountId', null);
+      if (!action.accountId) return state.merge({
+        results: ResultsRecord(),
+        submitted: false,
+        submittedValue: '',
+        filter: 'accounts',
+        accountId: null,
+      });
       return ReducerRecord({ accountId: action.accountId, filter: 'statuses' });
     default:
       return state;