AutoComplete: onSelect incorrectly called on mouse down, resulting in two selections with forceSelection

[inad9300]

Reproducer

https://stackblitz.com/edit/drzc4t?file=src%2FApp.jsx

Steps to reproduce the behavior

0. Open the console
1. Write "tea" in the input box
2. Click and hold "black tea"
3. See how "tea" is reported as selected!
4. Release the click
5. "black tea" is now reported as selected, as expected – but it is too late, the onSelect callback has already run and done all the side effects it needed, only with the wrong item

To complicate matters further, if you are adding elements to a list above the autocomplete element on select, the autocomplete and its dropdown will be pushed down as you click down, such that the element that you were going to click is no longer under the cursor, and nothing else is selected when you release the click, so only the undesired item ends up selected.

[inad9300]

Any luck with this one?

[tnowad]

I think this issue comes from the forceSelection prop you pass. When it's set, the forceItemSelection function runs during the blur event.

primereact/components/lib/autocomplete/AutoComplete.js

Lines 428 to 436 in 2206295

	const onInputBlur = (event) => {
	setFocusedState(false);
	if (props.forceSelection) {
	forceItemSelection(event);
	}
	props.onBlur && props.onBlur(event);
	};