Not able to set focus on the Dropdown component in Primereact

Question

I am trying to set focus on "Dropdown" component of the primereact but focus is not coming to the "Dropdown" component.

I have used autoFocus property as given in https://www.primefaces.org/primereact/#/dropdown . Then I tried to use react ref to set the focus.

https://codesandbox.io/s/dropdownautofocus-jko5d

Answer 1

Focus on PrimeReact's Dropdown can be programmatically set using DOM querySelector() method. For example:

• Add an id to your Dropdown

   <Dropdown id="dropdown" ... />
  
   <Button onClick={onButtonClick} label="Set the focus" />
  

• In onButtonClick function use querySelector method to find and focus on input element of Dropdown

  const onButtonClick = () => {
     document.querySelector('#dropdown input').focus();
  };
  

Answer 2

You can set focus on PrimeReact's Dropdown using the focusInputRef prop. Here is an example:

• Create a ref:

  const dropdownRef = useRef<HTMLInputElement>(null);
  

• In the onButtonClick function, use the ref to set focus:

  const onButtonClick = () => {
      if (dropdownRef) dropdownRef.current?.focus();
  };
  

• Add the focusInputRef prop to the Dropdown:

  <Dropdown focusInputRef={dropdownRef} ... />