Autofill in Safari does not work

[redbastie]

Using autofill in Safari does not update the models in the component.

It fills out the form, sure, but Livewire fails to pick up the values.

[jimpeters]

I don't think Safari is triggering a change event when you auto fill. This is probably out of scope for Livewire to deal with. Maybe this thread will provide some guidance.

vuejs/vue#7058

[dubcanada]

There is already a thread about this #1081 maybe check there to see if that solves the issue.

[nuernbergerA]

Hey, @redbastie

please post a domain-free code example that's easy to copy and paste to reproduce your issue.

Thanks!

[redbastie]

Open up Safari.

Go here: https://laravelplayground.com/#/snippets/350d5f68-ab64-492f-a599-76f924a18278

Enter any an email & password, then click "login". You will see the dump of the $output variable is accurate.

When Safari prompts, choose to remember the email & password to your keychain.

Now refresh the page and then focus the email input, have Safari autofill the fields, then click "login". You will see the $output dump contains an array with 2 empty values.

This is a problem because Safari has a 17% market share and it is growing by the day: https://www.w3counter.com/globalstats.php

[redbastie]

OK check this out, this works:

<div>
    <form>
        <input type="email" placeholder="Email" wire:model.defer="state.email">
        <input type="password" placeholder="Password" wire:model.defer="state.password">
        <button type="submit">Submit</button>
    </form>

    {{ print_r($state, true) }}
</div>

@push('scripts')
    <script>
        $('form').submit(function (event) {
            event.preventDefault();

            $(':-webkit-autofill').each(function () {
                @this.set($(this).attr('wire:model.defer'), $(this).val());
            });

            @this.call('submit');
        });
    </script>
@endpush

I'm using jQuery but I'm sure it can be translated into vanilla JS or whatever.

All we have to do is add :webkit-autofill checks when an action is made, then wire it accordingly if it is null, no?

[glaesser]

This is an issue especially in mobile safari (iOS), was really hoping v2 would've fixed this glaring issue...!

[brenjt]

Looks like someone might have found a solution for this #1661

[redbastie]

Looks like someone might have found a solution for this #1661

Yeah, me :P

[redbastie]

PR that fixes the bug with IE11 support: #1696

[calebporzio]

Safari autofill should be fixed in 2.2.8

Please run php artisan view:clear, update Livewire, and report here if the problem is fixed, otherwise, re-submit please.

Thanks everyone!

[f-liva]

Still present in 2.3.18

[jevail]

Still present in 2.4

[sytheveenje]

I can confirm that it's still present in 2.4.3 as well

[zepfietje]

I'm also running into this using the latest Livewire version.

[Liamso]

I'm also running into this problem, bump!

Edit; Just because it can seem like people come to you with more problems (issues) than compliments & I feel that I need to balance that out a bit with my bump - thank you so much for the package Caleb :)

[calebporzio]

Thanks @Liamso , very encouraging to hear!

[Liamso]

Upgrading to 2.4.4 and running php artisan view:clear seems to have solved the issue

[zepfietje]

@Liamso, not sure if you're talking about this exact issue.
I've tried running php artisan view:clear and the bug is still present in Livewire 2.4.4.

[ahinkle]

I'm having an issue where it doesn't fill multiple autofill fields (filling in a full address for example), but it does work on single 1 to 1 autofill fields.

Example:
Working 1 to 1: Phone number field - autofills the phone number saved in safari

Not working:

Saved address: 123 main st new york ny

Fields:
Address
City
State

When selecting the address from the autofill, it flashes and removes the values.

[mokrusoft]

I had the same issue with autofill and a workaround I found was replacing wire:model with x-model (AlpineJS) using @entangle
<input x-data="{email: @entangle('email')}" x-model="email"/>