fix: autofocus on tab switch

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<HTMLInputElement>(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 (
     <Flex
       align="center"
@@ -460,6 +472,7 @@ export const ParticipantSearch = ({
     >
       <SearchIcon style={{ position: 'absolute', left: '0.5rem' }} />
       <Input
+        ref={inputRef}
         type="text"
         placeholder={placeholder}
         css={{ w: '100%', p: '$6', pl: '$14', bg: inSidePane ? '$surface_default' : '$surface_dim' }}
@@ -472,8 +485,6 @@ export const ParticipantSearch = ({
         }}
         autoComplete="off"
         aria-autocomplete="none"
-        // @ts-ignore Flag added for customiser UI
-        autoFocus={!elements?.participant_list?.disable_autofocus}
       />
     </Flex>
   );