packages/components/hooks/useDrawerContactFocus.ts

   1 import type { RefObject } from 'react';
   2 import { useEffect, useRef } from 'react';
   3
   4 import type { SelectedDrawerOption } from '@proton/components/components/drawer/views/DrawerView';
   5 import { CONTACT_TAB } from '@proton/components/components/drawer/views/interface';
   6
   7 const useDrawerParent = (searchInputRef: RefObject<HTMLInputElement>, tab: SelectedDrawerOption) => {
   8     const animationEnded = useRef(false);
   9
  10     const onFocusSearchInput = () => {
  11         searchInputRef?.current?.focus();
  12         animationEnded.current = true;
  13     };
  14
  15     // When we switch tab (contact, contact group, setting), we also want to focus the search input
  16     useEffect(() => {
  17         if (animationEnded.current && tab.value === CONTACT_TAB.CONTACT) {
  18             onFocusSearchInput();
  19         }
  20     }, [tab]);
  21
  22     return { onFocusSearchInput };
  23 };
  24
  25 export default useDrawerParent;