alphagov
Can't click on an element below the typeahead with inline menu open
(This bug would be easy to demonstrate with something like https://github.com/alphagov/accessible-typeahead/issues/42)
If you have a typeahead with a displayMenu: 'inline' list of options open, then when you click on a different element in the page, these events happen: mouseDown -> blur -> mouseUp.
By default, click events don't get registered until mouseUp, to allow users to change their mind and drag the cursor away before letting go of the click. However, because the blur event gets triggered before, this will collapse the typeahead menu, which will move elements beneath it in the page upwards. This "pulls the rug" underneath the mouse, and the click event won't register on the clicked element.
Video of this in action:
I've seen several users get thrown by this - to their eyes, it looks like the click on the continue button hasn't registered - so they have to click twice. This is compounded as focus moves to the continue button, so they can see something has happened when they click.
I'd consider this a high priority to fix.
Agree @edwardhorsford.
Worth mentioning that displayMenu: 'overlay' is a current workaround for this.
Talking with @tvararu it sounds like a cheap/quick fix is to put a slight delay on the menu collapsing.
Given many users will fall foul of this issue, I'd like to suggest we do this quick fix and leave an issue open to investigate a more elegant solution. Thoughts?