livewire: Autofill from password manager not working in Mobile Safari
Description
Per issue title
Steps to reproduce
I am using the TALL Laravel frontend preset, and have found that the login form (and possibly others, given the nature of the issue) don’t appear to work correctly when using a password manager - 1Password in my instance - for autofill.
My component properties are typed i.e. public string $email, however, I get a 500 error when using the password manager, that the $email property cannot be null. I can make the $email property optional (?string), but this merely allows the component validation to run, which will say that the email field is required.
Otherwise typing my email and password, and even manually pasting the password into the input works correctly.
Video of errant behaviour: http://dyry.me/6d7sgj
Context
- Livewire version: 1.1.0
- Laravel version: 7.14.1
- Browser: Mobile Safari (iOS 13.5)
About this issue
- Original URL
- State: closed
- Created 4 years ago
- Reactions: 4
- Comments: 20 (9 by maintainers)
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!
@stefro theres not necessarily a problem, it’s more of a quirk so the “fix” is more of a hack, haha.
I’ll get a PR in for this soon, testing it is a bit of a pain in the neck.
@acurrieclark there was a small change from 1.3.0 to 1.3.1 regarding event listeners - I’ll have to look into that one. The problem with Safari, especially on iOS, is that password managers don’t interact directly with the browser. Instead, they go through the iOS Autofill API so it’s not really down to them to fire all of the correct events on the input, it’s more down to Apple.
It still not seems to work with Face-ID:
https://www.youtube.com/watch?v=E2GkWf6_sCg
PR that fixes the bug with IE11 support: https://github.com/livewire/livewire/pull/1696
@glaesser I am removing all
wire:modeldirectives from my logging form then and replacing them with the alpine equivalent. I then use alpine to capture the form submit event, fill the livewire models using@this.setand then call the login method with@this.call.Works fine for me for now while a proper fix is put in place.