CODEWITHSUNDEEP
javascriptreactjsautofocusprimereact
Gobinda
Gobinda

Reputation: 79

Not able to set focus on the Dropdown component in Primereact

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

Upvotes: 2

Views: 1895

Answers (2)

Jake Kugel
Jake Kugel

Reputation: 119

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} ... />

Upvotes: 0

Dusan Kovacevic
Dusan Kovacevic

Reputation: 1437

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

Upvotes: 2

Related Questions