Fix nested buttons in search popout in web UI (#34871)

app/javascript/mastodon/actions/search.ts

@@ -121,10 +121,15 @@ export const clickSearchResult = createAppAsyncThunk(
 
 export const forgetSearchResult = createAppAsyncThunk(
   'search/forgetResult',
-  (q: string, { dispatch, getState }) => {
+  (
+    { q, type }: { q: string; type?: RecentSearchType },
+    { dispatch, getState },
+  ) => {
     const previous = getState().search.recent;
     const me = getState().meta.get('me') as string;
-    const current = previous.filter((result) => result.q !== q);
+    const current = previous.filter(
+      (result) => result.q !== q || result.type !== type,
+    );
 
     searchHistory.set(me, current);
     dispatch(updateSearchHistory(current));

app/javascript/mastodon/features/compose/components/search.tsx

@@ -221,7 +221,7 @@ export const Search: React.FC<{
     },
     forget: (e) => {
       e.stopPropagation();
-      void dispatch(forgetSearchResult(search.q));
+      void dispatch(forgetSearchResult(search));
     },
   }));
 
@@ -497,8 +497,10 @@ export const Search: React.FC<{
             <div className='search__popout__menu'>
               {recentOptions.length > 0 ? (
                 recentOptions.map(({ label, key, action, forget }, i) => (
-                  <button
+                  <div
                     key={key}
+                    tabIndex={0}
+                    role='button'
                     onMouseDown={action}
                     className={classNames(
                       'search__popout__menu__item search__popout__menu__item--flex',
@@ -509,7 +511,7 @@ export const Search: React.FC<{
                     <button className='icon-button' onMouseDown={forget}>
                       <Icon id='times' icon={CloseIcon} />
                     </button>
-                  </button>
+                  </div>
                 ))
               ) : (
                 <div className='search__popout__menu__message'>