feat: Clicking enter key on search input selecting first conversation (#17603)

Author: przemvs

src/script/page/LeftSidebar/panels/Conversations/ConversationHeader/ConversationHeader.tsx

@@ -27,6 +27,7 @@ import {WebAppEvents} from '@wireapp/webapp-events';
 import {Icon} from 'Components/Icon';
 import {ConversationLabel} from 'src/script/conversation/ConversationLabelRepository';
 import {SidebarTabs} from 'src/script/page/LeftSidebar/panels/Conversations/state';
+import {handleEnterDown} from 'Util/KeyboardUtil';
 import {t} from 'Util/LocalizerUtil';
 
 import {
@@ -51,6 +52,7 @@ interface ConversationHeaderProps {
   searchInputPlaceholder: string;
   currentFolder?: ConversationLabel;
   setIsConversationFilterFocused: (isFocused: boolean) => void;
+  onSearchEnterClick: (event: KeyboardEvent<HTMLInputElement>) => void;
 }
 
 export const ConversationHeader = ({
@@ -62,6 +64,7 @@ export const ConversationHeader = ({
   currentFolder,
   searchInputPlaceholder,
   setIsConversationFilterFocused,
+  onSearchEnterClick,
 }: ConversationHeaderProps) => {
   const {canCreateGroupConversation} = generatePermissionHelpers(selfUser.teamRole());
   const isFolderView = currentTab === SidebarTabs.FOLDER;
@@ -84,11 +87,16 @@ export const ConversationHeader = ({
     });
   }, []);
 
-  function onKeyDown(event: KeyboardEvent<HTMLInputElement>) {
+  const onKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {
     if (event.key === 'Escape') {
       setSearchValue('');
     }
-  }
+
+    handleEnterDown(event, () => {
+      onSearchEnterClick(event);
+      setIsConversationFilterFocused(false);
+    });
+  };
 
   return (
     <>

src/script/page/LeftSidebar/panels/Conversations/Conversations.tsx

@@ -17,7 +17,7 @@
  *
  */
 
-import React, {useEffect, useState} from 'react';
+import React, {KeyboardEvent as ReactKeyBoardEvent, useEffect, useState} from 'react';
 
 import {amplify} from 'amplify';
 import {container} from 'tsyringe';
@@ -60,6 +60,8 @@ import {useConversationFocus} from '../../../../hooks/useConversationFocus';
 import {PreferenceNotificationRepository} from '../../../../notification/PreferenceNotificationRepository';
 import {PropertiesRepository} from '../../../../properties/PropertiesRepository';
 import {PROPERTIES_TYPE} from '../../../../properties/PropertiesType';
+import {generateConversationUrl} from '../../../../router/routeGenerator';
+import {createNavigateKeyboard} from '../../../../router/routerBindings';
 import {TeamState} from '../../../../team/TeamState';
 import {UserState} from '../../../../user/UserState';
 import {ListViewModel} from '../../../../view_model/ListViewModel';
@@ -304,6 +306,15 @@ const Conversations: React.FC<ConversationsProps> = ({
     </>
   );
 
+  const handleEnterSearchClick = (event: ReactKeyBoardEvent<HTMLDivElement>) => {
+    const firstFoundConversation = currentTabConversations?.[0];
+
+    if (firstFoundConversation) {
+      createNavigateKeyboard(generateConversationUrl(firstFoundConversation.qualifiedId), true)(event);
+      setConversationsFilter('');
+    }
+  };
+
   return (
     <div className="conversations-wrapper">
       <div className="conversations-sidebar-spacer" css={conversationsSpacerStyles(mdBreakpoint)} />
@@ -319,6 +330,7 @@ const Conversations: React.FC<ConversationsProps> = ({
             setSearchValue={setConversationsFilter}
             searchInputPlaceholder={searchInputPlaceholder}
             setIsConversationFilterFocused={setIsConversationFilterFocused}
+            onSearchEnterClick={handleEnterSearchClick}
           />
         }
         hasHeader={!isPreferences}