1

I have an Angular 4 app using a typeahead feature, currently being interfered with for users on Edge. Edge is populating an autocomplete dropdown that shows on top of the typeahead dropdown. Normally this wouldn't be more than annoyance except for the following scenario:

The user needs to select something we'll call a Case Name. It's likely that by this stage they've typed out the Case Name elsewhere on the application. Subsequently, when they click on this particular typeahead, they may see the Case Name they're looking for in the Edge autocomplete dropdown. If they use that, rather than the Input's typeahead, the corresponding Case ID never gets registered with the component, and this component executes a save using an ID, not a name. Essentially the user sees a valid Case Name, clicks save, and gets an error pop-up.

Moreover, the Input currently uses a typeahead select event to respond to an input change, rather than Angular's two-way data binding [(ngModel)].

I found virtually the exact issue in this GitHub issue, but they reference autocomplete="off" as being a working solution, however neither autocomplete="off" nor autocomplete="false" seem to have any effect on the input or form tags in my case.

Similarly, this post has a discouraging response suggesting Edge had disabled autocomplete="off" and didn't seem to offer any alternatives.

I also found this response to a post using a fake series of inputs, but it seems this only applies to login credential autofilling.

TylerH
  • 19,065
  • 49
  • 65
  • 86
Sam
  • 422
  • 3
  • 11

1 Answers1

1

Autocompletes generally work off of field labels and ID's. One thing that you could do (which is a horrible hack) is to make those fields dynamic and generated (timestamp generate GUID or something) this would break the autocomplete functionality that the browser uses, however it does also break the accessibility of your form to an extent. If this is not an issue it seems like a decent solution.

zmanc
  • 4,551
  • 12
  • 41
  • 82
  • 1
    Hmm this actually seems like a really great idea. Would be much quicker for me to implement a GUID for labels than rewriting the entire component. I'll update you as to whether or not I get it to work – Sam Apr 13 '18 at 14:37
  • 1
    Initial testing works, a simple and creative solution, many many thanks @zmanc – Sam Apr 13 '18 at 14:58