diff --git a/packages/roomkit-react/src/Prebuilt/components/Footer/ParticipantList.tsx b/packages/roomkit-react/src/Prebuilt/components/Footer/ParticipantList.tsx index b7bf3af9e7..d754fb25fe 100644 --- a/packages/roomkit-react/src/Prebuilt/components/Footer/ParticipantList.tsx +++ b/packages/roomkit-react/src/Prebuilt/components/Footer/ParticipantList.tsx @@ -1,4 +1,4 @@ -import React, { Fragment, useCallback, useState } from 'react'; +import React, { Fragment, useCallback, useEffect, useRef, useState } from 'react'; import { useDebounce, useMedia } from 'react-use'; import { HMSPeer, @@ -85,6 +85,7 @@ export const ParticipantList = ({ return { ...filterValue }; }); }, []); + if (peerCount === 0) { return null; } @@ -438,6 +439,9 @@ export const ParticipantSearch = ({ const [value, setValue] = React.useState(''); const isMobile = useMedia(cssConfig.media.md); const { elements } = useRoomLayoutConferencingScreen(); + const inputRef = useRef(null); + // @ts-ignore Flag added for customiser UI + const enableAutoFocus = !elements?.participant_list?.disable_autofocus; useDebounce( () => { @@ -446,6 +450,14 @@ export const ParticipantSearch = ({ 300, [value, onSearch], ); + + useEffect(() => { + if (enableAutoFocus) { + // When switching from chat to peer list, the tab retains focus due to the click + setTimeout(() => inputRef.current?.focus(), 0); + } + }, [enableAutoFocus]); + return ( );