Autocomplete dropdown not re-appearing after making typo

[rasmuscnielsen]

Flux version

v1.1.2

Livewire version

v3.5.18

What is the problem?

In safari (web + mobile) the autocomplete doesn't reappear after having made a typo. Even when dismissed and refocused it doesn't reappear - it requires a full page reload.

Sidenote: There is also a bit of glitching with focus automatically being hijacked when clicked outside, although this is not as significant as the other bug.

See videos with reproduction on the fluxui.dev website:

macOS 15.0 Safari 18: https://share.icloud.com/photos/0c4FPmK9GZ_4BJYTO9vCP78NA
iOS 18.1.1: https://share.icloud.com/photos/0dfTAnOIo4Y9PQwdp0qyjJhEw
chrome 131: works fine

Code snippets

Tested straight on docs website.

How do you expect it to work?

Chrome works well already, with the exception that when clicked outside I would expect it to loose focus, not automatically regain it.

Please confirm (incomplete submissions will not be addressed)

• I have provided easy and step-by-step instructions to reproduce the bug.
• I have provided code samples as text and NOT images.
• I understand my bug report will be closed if I haven't met the criteria above.

[rasmuscnielsen]

After browsing previous issues, it could look like a regression of this:

#13

[joshhanley]

@rasmuscnielsen thanks for reporting! I've submitted a PR with a fix.

PR description below.

The scenario

If you have an autocomplete component, normally when you start typing in the input, the options will be filtered until there are no options left. When that happens, the options dropdown is then hidden. If the user backspaces in the input, then the options dropdown should reappear if there is a match.

Chrome

But in Safari 18 (released end 2024) on iOS and macOS, the autocomplete component will no longer re-show the autocomplete options dropdown once there is a match again.

Safari 18

<?php

use Livewire\Volt\Component;

new class extends Component {
    public $state;
};

?>

<div>
    <flux:autocomplete wire:model="state" label="State of residence">
        <flux:autocomplete.item>Alabama</flux:autocomplete.item>
        <flux:autocomplete.item>Arkansas</flux:autocomplete.item>
        <flux:autocomplete.item>California</flux:autocomplete.item>
        <!-- ... -->
    </flux:autocomplete>
</div>

The problem

When I dug into this, I found that the way that the autocomplete shows/hides the options dropdown is through a calculation of how many options are visible or not.

let isHidden = el => getComputedStyle(el).display === 'none'

...

empty = Array.from(list.querySelectorAll('& > ui-option')).filter(i => ! isHidden(i)).length === 0

In Chrome, if we have a hidden options dropdown and check the visibility of one of the options within it, it will return flex even if the parent element has a display of none.

Where as it seems that in Safari 18, getComputedStyle(el).display will return none for any elements inside an element that is display: none, regardless of whether it's display value should be flex, `none, etc.

The solution

The solution is to instead filter the options based on whether they have the data-hidden attribute or not, instead of the computed display value.

let isHidden = el => el.hasAttribute('data-hidden')

...

empty = Array.from(list.querySelectorAll('& > ui-option')).filter(i => ! isHidden(i)).length === 0

Fixes #977

[rasmuscnielsen]

@joshhanley This is awesome - thank you so much for a fix + detailed description!