Focus room search and member search

src/app/molecules/room-members/RoomMembers.jsx

@@ -1,4 +1,6 @@
-import React, { useState, useEffect, useCallback } from 'react';
+import React, {
+  useState, useEffect, useCallback, useRef,
+} from 'react';
 import PropTypes from 'prop-types';
 import './RoomMembers.scss';
 
@@ -14,6 +16,7 @@ import Input from '../../atoms/input/Input';
 import { MenuHeader } from '../../atoms/context-menu/ContextMenu';
 import SegmentedControls from '../../atoms/segmented-controls/SegmentedControls';
 import PeopleSelector from '../people-selector/PeopleSelector';
+import settings from '../../../client/state/settings';
 
 const PER_PAGE_MEMBER = 50;
 
@@ -125,6 +128,11 @@ function RoomMembers({ roomId }) {
   const [membership, setMembership] = useState('join');
   const [members] = useMemberOfMembership(roomId, membership);
   const [searchMembers, handleSearch] = useSearchMembers(members);
+  const searchRef = useRef(null);
+
+  useEffect(() => {
+    if (!settings.isTouchScreenDevice) searchRef.current.focus();
+  }, []);
 
   useEffect(() => {
     setItemCount(PER_PAGE_MEMBER);
@@ -138,7 +146,11 @@ function RoomMembers({ roomId }) {
   return (
     <div className="room-members">
       <MenuHeader>Search member</MenuHeader>
-      <Input onChange={handleSearch} placeholder="Search for name" />
+      <Input
+        onChange={handleSearch}
+        placeholder="Search for name"
+        forwardRef={searchRef}
+      />
       <div className="room-members__header">
         <MenuHeader>{`${searchMembers ? `Found — ${mList.length}` : members.length} members`}</MenuHeader>
         <SegmentedControls

src/app/molecules/room-search/RoomSearch.jsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 import PropTypes from 'prop-types';
 import './RoomSearch.scss';
 
@@ -107,6 +107,11 @@ function RoomSearch({ roomId }) {
   const mx = initMatrix.matrixClient;
   const isRoomEncrypted = mx.isRoomEncrypted(roomId);
   const searchTerm = searchData?._query.search_categories.room_events.search_term ?? '';
+  const searchRef = useRef(null);
+
+  useEffect(() => {
+    searchRef.current.focus();
+  }, []);
 
   const handleSearch = (e) => {
     e.preventDefault();
@@ -145,6 +150,7 @@ function RoomSearch({ roomId }) {
             placeholder="Search for keywords"
             name="room-search-input"
             disabled={isRoomEncrypted}
+            forwardRef={searchRef}
           />
           <Button iconSrc={SearchIC} variant="primary" type="submit">Search</Button>
         </div>