[IMPROVE] Added auto-focus for better user-experience.

app/ui-utils/client/lib/modal.js

@@ -209,16 +209,14 @@ Template.rc_modal.helpers({
 
 Template.rc_modal.onRendered(function() {
 	this.oldFocus = document.activeElement;
-	if (this.data.onRendered) {
-		this.data.onRendered();
-	}
-
 	if (this.data.input) {
 		$('.js-modal-input', this.firstNode).focus();
 	} else if (this.data.showConfirmButton && this.data.confirmOnEnter) {
 		$('.js-confirm', this.firstNode).focus();
 	}
-
+	if (this.data.onRendered) {
+		this.data.onRendered();
+	}
 	this.data.closeOnEscape && document.addEventListener('keydown', modal.onKeyDown);
 });
 

app/ui/client/lib/fileUpload.js

@@ -116,7 +116,7 @@ const getAudioUploadPreview = (file, preview) => `\
 		<input class="rc-input__element" id='file-name' style='display: inherit;' value='${ Handlebars._escape(file.name) }' placeholder='${ t('Upload_file_name') }'>
 	</div>
 	<div class="rc-input__wrapper">
-		<input class="rc-input__element" id='file-description' style='display: inherit;' value='' placeholder='${ t('Upload_file_description') }'>
+		<input class="rc-input__element" id='file-description' autofocus style='display: inherit;' value='' placeholder='${ t('Upload_file_description') }'>
 	</div>
 </div>`;
 
@@ -132,7 +132,7 @@ const getVideoUploadPreview = (file, preview) => `\
 		<input class="rc-input__element" id='file-name' style='display: inherit;' value='${ Handlebars._escape(file.name) }' placeholder='${ t('Upload_file_name') }'>
 	</div>
 	<div class="rc-input__wrapper">
-		<input class="rc-input__element" id='file-description' style='display: inherit;' value='' placeholder='${ t('Upload_file_description') }'>
+		<input class="rc-input__element" id='file-description' autofocus style='display: inherit;' value='' placeholder='${ t('Upload_file_description') }'>
 	</div>
 </div>`;
 
@@ -145,7 +145,7 @@ const getImageUploadPreview = (file, preview) => `\
 		<input class="rc-input__element" id='file-name' style='display: inherit;' value='${ Handlebars._escape(file.name) }' placeholder='${ t('Upload_file_name') }'>
 	</div>
 	<div class="rc-input__wrapper">
-		<input class="rc-input__element" id='file-description' style='display: inherit;' value='' placeholder='${ t('Upload_file_description') }'>
+		<input class="rc-input__element" id='file-description' autofocus style='display: inherit;' value='' placeholder='${ t('Upload_file_description') }'>
 	</div>
 </div>`;
 
@@ -180,7 +180,7 @@ const getGenericUploadPreview = (file) => `\
 <input class="rc-input__element" id='file-name' style='display: inherit;' value='${ Handlebars._escape(file.name) }' placeholder='${ t('Upload_file_name') }'>
 </div>
 <div class="rc-input__wrapper">
-<input class="rc-input__element" id='file-description' style='display: inherit;' value='' placeholder='${ t('Upload_file_description') }'>
+<input class="rc-input__element" id='file-description' style='display: inherit;' value='' autoFocus placeholder='${ t('Upload_file_description') }'>
 </div>
 </div>`;
 
@@ -260,7 +260,7 @@ export const fileUpload = async (files, input, { rid, tmid }) => {
 			confirmButtonText: t('Send'),
 			cancelButtonText: t('Cancel'),
 			html: true,
-			onRendered: () => $('#file-name').focus(),
+			onRendered: () => $('#file-description').focus(),
 		}, async (isConfirm) => {
 			if (!isConfirm) {
 				return;

client/views/room/contextualBar/Discussions/index.js

@@ -2,7 +2,7 @@ import { FlowRouter } from 'meteor/kadira:flow-router';
 import React, { useCallback, useMemo, useState, memo } from 'react';
 import { Box, Icon, TextInput, Callout } from '@rocket.chat/fuselage';
 import { Virtuoso } from 'react-virtuoso';
-import { useDebouncedValue, useResizeObserver } from '@rocket.chat/fuselage-hooks';
+import { useDebouncedValue, useResizeObserver, useAutoFocus } from '@rocket.chat/fuselage-hooks';
 
 import VerticalBar from '../../../../components/VerticalBar';
 import { useTranslation } from '../../../../contexts/TranslationContext';
@@ -124,7 +124,7 @@ export function DiscussionList({ total = 10, discussions = [], loadMoreItems, lo
 	const showRealNames = useSetting('UI_Use_Real_Name');
 
 	const t = useTranslation();
-
+	const inputRef = useAutoFocus(true);
 	const onClick = useCallback((e) => {
 		const { drid } = e.currentTarget.dataset;
 		FlowRouter.goToRoomById(drid);
@@ -141,7 +141,7 @@ export function DiscussionList({ total = 10, discussions = [], loadMoreItems, lo
 		</VerticalBar.Header>
 		<VerticalBar.Content paddingInline={0} ref={ref}>
 			<Box display='flex' flexDirection='row' p='x24' borderBlockEndWidth='x2' borderBlockEndStyle='solid' borderBlockEndColor='neutral-200' flexShrink={0}>
-				<TextInput placeholder={t('Search_Messages')} value={text} onChange={setText} addon={<Icon name='magnifier' size='x20'/>}/>
+				<TextInput placeholder={t('Search_Messages')} value={text} onChange={setText} ref={inputRef} addon={<Icon name='magnifier' size='x20'/>}/>
 			</Box>
 			<Box flexGrow={1} flexShrink={1} overflow='hidden' display='flex'>
 				{error && <Callout mi='x24' type='danger'>{error.toString()}</Callout>}

client/views/room/contextualBar/RoomFiles/RoomFiles.js

@@ -1,5 +1,5 @@
 import React, { useState, useCallback, useMemo } from 'react';
-import { useMutableCallback, useLocalStorage, useUniqueId } from '@rocket.chat/fuselage-hooks';
+import { useMutableCallback, useLocalStorage, useUniqueId, useAutoFocus } from '@rocket.chat/fuselage-hooks';
 import {
 	Box,
 	Icon,
@@ -74,6 +74,7 @@ export const RoomFiles = function RoomFiles({
 		['text', t('Texts')],
 		['application', t('Files')],
 	], [t]);
+	const inputRef = useAutoFocus(true);
 
 	const searchId = useUniqueId();
 
@@ -91,7 +92,7 @@ export const RoomFiles = function RoomFiles({
 				<Box display='flex' flexDirection='row' p='x12' flexShrink={0}>
 					<Box display='flex' flexDirection='row' flexGrow={1} mi='neg-x4'>
 						<Margins inline='x4'>
-							<TextInput data-qa-files-search id={searchId} placeholder={t('Search_Files')} value={text} onChange={setText} addon={<Icon name='magnifier' size='x20'/>}/>
+							<TextInput data-qa-files-search id={searchId} placeholder={t('Search_Files')} ref={inputRef} value={text} onChange={setText} addon={<Icon name='magnifier' size='x20'/>}/>
 							<Select
 								flexGrow={0}
 								width='110px'

client/views/room/contextualBar/RoomMembers/List/RoomMembers.js

@@ -15,6 +15,7 @@ import {
 	useMutableCallback,
 	useDebouncedValue,
 	useLocalStorage,
+	useAutoFocus,
 } from '@rocket.chat/fuselage-hooks';
 import memoize from 'memoize-one';
 
@@ -72,6 +73,7 @@ export const RoomMembers = ({
 	rid,
 }) => {
 	const t = useTranslation();
+	const inputRef = useAutoFocus(true);
 
 	const options = useMemo(() => [
 		['online', t('Online')],
@@ -93,7 +95,7 @@ export const RoomMembers = ({
 				<Box display='flex' flexDirection='row' p='x12' flexShrink={0}>
 					<Box display='flex' flexDirection='row' flexGrow={1} mi='neg-x4'>
 						<Margins inline='x4'>
-							<TextInput placeholder={t('Search_by_username')} value={text} onChange={setText} addon={<Icon name='magnifier' size='x20'/>}/>
+							<TextInput placeholder={t('Search_by_username')} value={text} ref={inputRef} onChange={setText} addon={<Icon name='magnifier' size='x20'/>}/>
 							<Select
 								flexGrow={0}
 								width='110px'

client/views/room/contextualBar/Threads/index.js

@@ -13,6 +13,7 @@ import {
 	useResizeObserver,
 	useLocalStorage,
 	useMutableCallback,
+	useAutoFocus,
 } from '@rocket.chat/fuselage-hooks';
 
 import VerticalBar from '../../../../components/VerticalBar';
@@ -201,7 +202,7 @@ export function ThreadList({
 	const threadsRef = useRef();
 
 	const t = useTranslation();
-
+	const inputRef = useAutoFocus(true);
 	const [name] = useCurrentRoute();
 	const channelRoute = useRoute(name);
 	const onClick = useMutableCallback((e) => {
@@ -256,6 +257,7 @@ export function ThreadList({
 							value={text}
 							onChange={setText}
 							addon={<Icon name='magnifier' size='x20' />}
+							ref={inputRef}
 						/>
 						<Select
 							flexGrow={0}