Autocomplete field is broken

[Alex-Github-Account]

Before creating a new issue, please confirm:

• I have searched for duplicate or closed issues and discussions.
• I have tried disabling all browser extensions or using a different browser
• I have tried deleting the node_modules folder and reinstalling my dependencies
• I have read the guide for submitting bug reports.

On which framework/platform are you having an issue?

React

Which UI component?

Other

How is your app built?

Create React App

What browsers are you seeing the problem on?

Firefox, Chrome, Safari, Microsoft Edge

Please describe your bug.

here is demo https://codesandbox.io/s/affectionate-bird-ssdsi5
I already mentoined this bug but got no attention
If you click autocomplete field - select options pops up (ok behavior)
then you select another window (not just defocus a field or select another tab, but entirely different OS window) - select options dissapear (ok)
then you try to click button right below autocomplete - NOPE. autocomplete select options poped up (who asked them?) and covered the button, thus user click lands on the autocomplete, not the button. This is intercepting user input! Facepalm

What's the expected behaviour?

When user clicks on something, nothing should appear right below cursor right before click out of nowhere

Help us reproduce the bug!

I hope this works https://codesandbox.io/s/affectionate-bird-ssdsi5

Code Snippet

// Put your code below this line.

Additional information and screenshots

screenshot will not help, need video.

[zchenwei]

Hi @Alex-Github-Account, thank you for reporting this issue, I can see the behavior on my end. I think this is a more like a browser behavior. You can see the same happen on a native <input type="text" />, unfocus the entire window and then click the button, the focus will go back to that input as well. I hope this explain the issue and we will try to address it in our next release :)

[Alex-Github-Account]

nope. Browser built-in "input with autocomplete" will not re-popup it's options on window been re-focused. And for sure nothing will pop up right before user click right below cursor. Try it yourself:
Default HTML component works flawlessly:
<label for="favorite_team">Favorite Team:</label>
<input type="text" name="team" id="favorite_team" list="team_list">
<datalist id="team_list">
<option>Detroit Lions</option>
<option>Detroit Pistons</option>
<option>Detroit Red Wings</option>
<option>Detroit Tigers</option>
<!-- etc... -->
</datalist>
Also component onChange behaviour is not consistent with other amplifi-ui components - it passes event as parameter, not changed value as other components do.
Your downplaying of the bugs does not add points to you :)

[zchenwei]

nope. Browser built-in "input with autocomplete" will not re-popup it's options on window been re-focused. And for sure nothing will pop up right before user click right below cursor. Try it yourself: Default HTML component works flawlessly: Favorite Team: Detroit Lions Detroit Pistons Detroit Red Wings Detroit Tigers Also component onChange behaviour is not consistent with other amplifi-ui components - it passes event as parameter, not changed value as other components do. Your downplaying of the bugs does not add points to you :)

Right, I am just mentioning about the same focus behavior. Of course this is a bug and we will address it(#3033), currently we have the open behavior tied to focus event.