diff --git a/src/app/molecules/room-members/RoomMembers.jsx b/src/app/molecules/room-members/RoomMembers.jsx index 1f409f4f6..07a35d71a 100644 --- a/src/app/molecules/room-members/RoomMembers.jsx +++ b/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 (
Search member - +
{`${searchMembers ? `Found — ${mList.length}` : members.length} members`} { + 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} />