search

wire-elements / spotlight

Livewire component that brings Spotlight/Alfred-like functionality to your Laravel application.
MIT License
925 stars 72 forks source link

Safari tries to fill username #25

Closed quarterdeck closed 3 years ago

quarterdeck commented 3 years ago
Screenshot 2021-05-27 at 13 51 26
quarterdeck commented 3 years ago

Upon further investigation this seems like an absolutely crazy Safari bug and I'm not sure if it can be worked around or not.

I noticed that this was only happening on one page of our app. So I systematically commented out each section of HTML to see if any block was affecting it and I found one!

I narrowed it down to a single <p> tag which contained the text "Welcome back,". I thought the comma might be causing an issue (no idea why) so I removed it. No change.

I thought the word "back" might be making Safari think this was a login page for some reason? So I removed it and it fixed the issue! Crazy.

Out of curiosity I tried removing "Welcome" and adding "back" back in. Still didn't re-occur. ?!

So it seems only the combination of words "welcome back" causes this to happen. Absolutely no idea why. To confirm I chose another page randomly and put the phrase "welcome back" in a random position on the page and low and behold it caused this to happen again.

For some reason the presence of these words on the page is adding the following to the Shadow DOM of the input field:

<div pseudo="-webkit-credentials-auto-fill-button" role="button" aria-label="password AutoFill" style="display: none !important;"></div>

Easily the most bizarre bug I've ever come across.

quarterdeck commented 3 years ago

On further consideration I don't think it's a bug. I think Safari is assuming any page with "Welcome Back" on it is a login page and enabling this behaviour. Therefore I think it's intended.

laurensgroeneveld commented 3 years ago

I can confirm, created a HTML page with just a p and an input:

    <p>Welcome back</p>
    <input type="text">

This does indeed show a password option if I open this in Safari and focus the input:

image

Curiously enough, adding a style="display: none; to the p does no longer show the password dropdown.

quarterdeck commented 3 years ago

Nice one. I found that using a non-breaking space prevents the behaviour.

<p>welcome&nbsp;back</p>
infostreams commented 3 years ago

LOL 😂 Make sure to add a comment (with a link) to your code to document why that &nbsp; is there. I'm sure someone would just accidentally remove it otherwise.

val-o commented 3 years ago

It seems the same applies to "Sign In" image

mattijv commented 3 years ago

"Log in" works too. I tried a couple other languages (Finnish, German, French, Chinese) but the issue/feature seems to only happen with English (although I did use Google Translate, so I can't guarantee I used the right idioms).

chrisvasey commented 3 years ago

This issue is at top of hacker news right now, there have been a lot of comments speculating why this is here.

elstgav commented 3 years ago

~Does it respect autocomplete=“off”? You may be able to disable it with some form of the autocomplete attribute 🤔.~ Never mind, looks like that’s thoroughly explored in the Hacker News thread.

PhiloNL commented 3 years ago

Interesting issue 🤓 feel free to continue the discussion. I am closing the issue as it's not related to Spotlight.

vadim-isakov commented 1 year ago

Safari offers autocomplete if there is a word "username" inside of a label.

There are 2 solutions I found to prevent this:

  1. Adding the word "search" to the field's name (label and input)
  2. Replace the label's text character with its Unicode equivalent. For example: replace "a" with "\u0430".