Not able to set focus on the Dropdown component in Primereact

0
votes

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

1
javascriptreactjsautofocusprimereact

1 Answers

1
votes

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();
};