This is very similar to the the problem mentioned here except that mine is a security risk. Safari prefilling the form is a generic irritating issue. but this happens to me in the User's Profile page which kind of loads the user data and allows them to change/update it.
I have the following 5 fields on my screen
- Username
- Current Password
- New Password
- Confirm New Password.
~ If user 1 has logged in (using username/password) and selected --> save password while safari prompts to ,
After that, Any user who logs in that browser has only the username and password populated with that of user1. My angular bindings are going for a toss. When I debug - I see that my bindings are happening and after that safari autofill kicks in and overwrites that. (it has a yellow background on those 2 fields).
I tried creating
- The fake after the real email input in the dom.
- The fake input with a fake label.
- Dint use display, visibility or opacity to hide the fake elements.
- disable the input and enable it after some time.
as mentioned by on of the answers..
My Sample angular binding for user id :
<label for="accountUserName">UserName</label>
<!--Autocomplete is set to false and not Off purposely -->
<input type="text" ng-maxlength="20" name="accountUserName" class="form-control" required data-ng-model="ctrl.user.userId" autocomplete="false" />
<!--Setting up dummy fields for autofill turn off -->
<label for="userId" hidden class="hidden"></label>
<input type="text" name="userId" class="form-control hidden" hidden />
<!--End Dummy -->
Also, this issue happens only in IOS Safari. No other bloody browsers.
- ios 10.3.3 Safari browser.
Please advice.. this looks like as if we are showing wrong data