Keyboard focus related bugs (#299)

* Focus when opening the emoji board and editing a message

* Clean emoji board after closing

* Focus room search and member search

* Resolve conversations

src/app/molecules/message/Message.jsx

@@ -1,5 +1,7 @@
 /* eslint-disable react/prop-types */
-import React, { useState, useEffect, useCallback, useRef } from 'react';
+import React, {
+  useState, useEffect, useCallback, useRef,
+} from 'react';
 import PropTypes from 'prop-types';
 import './Message.scss';
 
@@ -245,6 +247,14 @@ MessageBody.propTypes = {
 function MessageEdit({ body, onSave, onCancel }) {
   const editInputRef = useRef(null);
 
+  useEffect(() => {
+    editInputRef.current.focus();
+
+    // Setting the value here instead of using the value prop below
+    // makes the cursor end up at the end of the line instead of the begining
+    editInputRef.current.value = body;
+  }, []);
+
   const handleKeyDown = (e) => {
     if (e.keyCode === 13 && e.shiftKey === false) {
       e.preventDefault();
@@ -257,7 +267,6 @@ function MessageEdit({ body, onSave, onCancel }) {
       <Input
         forwardRef={editInputRef}
         onKeyDown={handleKeyDown}
-        value={body}
         placeholder="Edit message"
         required
         resizable

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;
 
@@ -138,7 +141,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"
+        autoFocus={!settings.isTouchScreenDevice}
+      />
       <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';
 
@@ -145,6 +145,7 @@ function RoomSearch({ roomId }) {
             placeholder="Search for keywords"
             name="room-search-input"
             disabled={isRoomEncrypted}
+            autoFocus
           />
           <Button iconSrc={SearchIC} variant="primary" type="submit">Search</Button>
         </div>