Can't dismiss the autocomplete by tapping outside the component on an iPhone

[AndrewStanton94]

My expectation

As a web visitor I want to press outside the component so that I dismiss it without providing a value

Given I have selected a field using accessible-autocomplete and options are displayed
When I press the screen outside the component
Then the component loses focus and the autocomplete suggestions are no longer displayed.

This is the behaviour I have seen on desktop browsers, android and an iPad.

Bug description

• Devices:
  • iPhone 13
  • iPhone 13 Pro Max
• OS version: iOS 17.4.1

Steps to reproduce

1. Using an iPhone, go to the accessible-autocomplete examples page
2. Head down to the { showAllValues: true } example (this was also observed on other components I tried it on)
3. Tap on the the component and you will see the list of countries is displayed

4. Trying to click outside this component will not close it, the only way to dismiss the list of suggestions is to select one

I have checked the existing bugs and I don't believe this is a duplicate. However I do see the behaviour described in #222 is still the same.

Notes from our front-end developer

The library handles the input blur events, and while it’s working correctly for Safari on desktop, it is failing to close the options on iPhone.

The issue is likely to be related to the function that handles blur src/autocomplete.js handleComponentBlur()
line 165 . onConfirm itself seems to fire correctly which could indicate a problem with the newState or newQuery within it.

Video

iPhone.focus.bug.mp4