material-auto-suggest-input, how to avoid that the list of input inserted values of the browser overlaps the auto-suggest values list
giorgiofran opened this issue · 5 comments
angular_components 0.9.2
Chrome
when I use the material-auto-suggest-input component, the browser overlaps the list of allowed values, with the list of values that I inserted in input fields in the browser in last days.
I have seen that in the 'angular_components-0.9.2\lib\material_input\material_auto_suggest_input.html'
the autoComplete attribute is set to 'list'
inputAriaAutocomplete="list"
Is that the attribute that produce the behavior I am observing?
Why it is set to 'list' (I already give a list of valid values...)?
Anyway, is it possible to create an attribute in the material-auto-suggest-input component in order to customize this behavior?
I don't totally understand what you mean. Do you have a minimal reproduction that you could share? and a screenshot showing what the issue is?
This is my auto suggest list (at least a part).
If I click on the input field or insert a letter this is what happens:
The list that overlaps mine is the one generated by the browser to help input.
I guess that the browser collects the inputs you give based on the field Id and then it does a sort of "auto suggestion". In my case the inputs shown have been grabbed by other fields in my application. Reading in the internet I discovered that this functionality could be disabled setting the autocomplete attribute to false.
I have tried to set the autocomplete attribute to false in the DevTools of Chrome, but it seems that the autocomplete attribute is not a valid one. So, I do not know what to think.
Inside the DevTools I have seen that an "aria-autocomplete" attribute is set to "list"
But I tried to change it to "none" and nothing happened, so I do not know if this is a problem of Chrome or if it is not that attribute that generate my problem
The problem is caused by the presence of the id="null" attribute. If you create a simple form with an input field with id="null", insert a value and then submit the form, the browser stores the values for all field with the same id. This is the autofill function. Now the problem is to understand why the id attribute is present.
I have tried to replicate the case, but I couldn't. In all the tests that I did the id attribute was missing. Only in my production environment it appears (see the previous comment).
I have also tried to set the id to another value (id="j") in the Chrome DevTools, but, as soon as I click on the auto suggest field, the id is reset to null.
I'm sorry, the problem was caused by an unexpected behavior of a directive in my application.
No problem, I'm glad you found a solution.