Does anyone have any experience mangling input names to disable browser autocompletion when using LiveView?

Could you elaborate on what the desired behaviour of such a “mangled” field would be?

Disabling autofill/autocomplete on all or certain form fields is not sufficient?

It is not as they are often ignored.

There are hacks you can do like generating “junk” name input attributes, (<input name={generate_field(:name)} value={...} />) but of course this isn’t going to cut with LiveView without doing a whole bunch of trickery.

Yes, I’ve had this problem with Chrome based browsers ignoring autocomplete for address fields.

I jammed in non printing characters into the label (remove the underscores) S&#8_204;treet Add&#8_204;ress

A hack yes, but i couldn’t find another way at the time and haven’t revisited it. I didn’t need to do anything with the name attributes.

This worked for my scenario, I’m not sure what it will do for screen readers (my scenario is for a small in house app where screen readers were not a requirement).

Interesting! We’ll test this out (accessibility is important to us so we’ll see). Thanks!

I’m not sure I understand what problem you have there. Been implementing forms in LV without any autocomplete issues (as inautocomplete="off").

Also, I don’t get the problem you have with hidden fields.

I think third party fillers are the culprit, but I’m also not sure. It’s certainly not just an us-problem as there is a bunch of info on it out there. Our problem is that in user testing a non-tech-savvy user was using some kind of auto-completer (we’re trying to find out which one) and it filled in a required field they’d scrolled past and was off screen! In any event, our app is of the nature that form auto-completion never makes sense. Users are always adding completely different data and we’d rather just disable auto-completion across the board to avoid confusion. Case in point: it took us quite a while to realize what had happened with that user (we had a recording but again it got filled off-screen) as we first assumed it was a bug on our side.

Also, the “hidden field” thing is just a technique for doing this where you have the real fields as hidden fields and the visible ones as junk name attributes. This isn’t possible (or not easy) in LiveView. Even outside of LiveView it’s not ideal.

More context: https://stackoverflow.com/questions/2530/how-do-you-disable-browser-autocomplete-on-web-form-field-input-tags

By filled off-screen you mean the field was not visible to the user while they were filling it because it was scrolled out of the viewport or something or because you placed it in a deemed-invisible part of the screen so you can fill it programmatically?

Anyway, filling hidden fields with values typed into junk fields would require having something like two forms (of fields) where the one with hidden fields gets submitted while the one with the dummy (but real looking) ones does not.

Your problem here is two fold:

1. copying/syncing those values from dummy fields to hidden fields
2. validating server-side the hidden fields while showing the errors in the feedback for dummy fields

You can do this in LiveView, but you’ll either need a JS framework for #1 or write the input field event listeners in a hook yourself. Personally, I still use AlpineJS. I have it locked at v3.10.3 before it went completely incompatible with LV streams in v3.12.x+. Supposedly, you can also use Petite Vue which supposedly has most of Alpine features, including model used for input fields.

As for #2, it’s simple. LV supports (used to support? - I’m still on phx-feedback-for) providing a different field for feedback, so you can have your dummy fields use your hidden fields’ feedback.

I wasn’t familiar with this problem either. This MDN page is a good overview.

The “magic” of form handling in Phoenix definitely makes this annoying to deal with.

I think might be misunderstanding. I was just providing some “classic solutions” that I’d rather not use because they are all too complex with LiveView (and sorta terrible in general). But I also I missed providing some context. So it’s this:

The user neglected to fill in a required field, then kept scrolling until the field was off-screen. They part I wasn’t clear about is that they were using and auto-filler that fills in fields they aren’t even focused on as they go. So it ended up filling in the required field they’d missed with some junk it thought it was correct. When the user hit save the forum successfully submitted then presented them with data they were surprised to see.

My CTO found an interesting potential solution I have yet to tried but will later today and can report back. In a nutshell, you make all fields readonly and toggle that attribute on focus/blur. If it works, this would play really nicely with LV since it can be done with JS commands.

I appreciate the response, though!