AutoComplete Show Dropdown When Clicked

[EmirBoyaci]

[X] feature request

Normally, when AutoComplete clicked we want to see the selectable items however current AutoComplete components doesn't have this feature. It only shows selectable items when dropdown prop is true and dropdown icon is clicked but, we want when user clicks inside AutoComplete it will show dropdown and selectable items. How can we add that feature to AutoComplete component? Is it possible to do on our own or need PR?

• React version: 17.0.2

• PrimeReact version: 7.0.0

• Browser: all

• Language: TypeScript 4.4.4

[EmirBoyaci]

@melloware have you ever face with that problem before?

[melloware]

Let me investigate. It might be possible now or it might have to be a new property.

[melloware]

@EmirBoyaci yep here you go with working example...

Sorry I messed up my CodeSandbox. But here is its...

const ref = useRef(null);

<AutoComplete ref={ref} onClick={(e) => ref.current.search(e, "", "dropdown")} />

[melloware]

@EmirBoyaci if after testing you find it meets your needs please close the ticket.

[EmirBoyaci]

@EmirBoyaci if after testing you find it meets your needs please close the ticket.

Thanks for your quick reply! That's what I need but just one more question. I didn't used refs with TypeScript before so I couldn't find the correct type for that:

const ref = useRef(null);

The first error that I got is:

If I use non-null assertion operator I've got 2nd error which is:

The solution that you provide is works below but I wanna use correct type for useRef. Do you know the correct type for the useRef?

const ref = useRef<any>(null);

[melloware]

Here is a working example:

https://codesandbox.io/s/primereact-test-forked-5jgb7?file=/src/index.tsx

A for the Search error its only because the search method is not listed in the TypeScript file but it is definitely on the component. I used // @ts-ignore to hide the warning.

[melloware]

Please close this ticket once you have verified my code above. Thanks!

[EmirBoyaci]

Here is a working example:

https://codesandbox.io/s/primereact-test-forked-5jgb7?file=/src/index.tsx

A for the Search error its only because the search method is not listed in the TypeScript file but it is definitely on the component. I used // @ts-ignore to hide the warning.

I just thought maybe we have a solution different than @ts-ignore but it works perfectly! Thanks for all :)

[melloware]

@EmirBoyaci you can re-open this I added the search method to the TS doc in the PR.

[EmirBoyaci]

I’ve reopened

@EmirBoyaci you can re-open this I added the search method to the TS doc in the PR.