autocomplete not working on chrome, probably to browser autocomplition functionality

[bogdan-dubyk]

I'm submitting a ...

• [x] bug report
• [ ] feature request
• [ ] support request

What is the current behavior?

When I click on input in chrome and type something, chrome showing me blue x and because of that, it's not showing a dropdown with possible values after response returned from the backend. On other browsers where I test it (firefox, safari) all works as expected

What is the expected behavior?

When I type something to the input, the app sending a request to the server and after getting a response should show me a dropdown with possible suggestions

How are you importing Vue-simple-suggest?

• [ ] ESNext (original code, single-file .vue component, css included) (import VueSimpleSuggest from 'vue-simple-suggest/lib')
• [x] ES6 (import VueSimpleSuggest from 'vue-simple-suggest')
• [ ] ES7 and above (import VueSimpleSuggest from 'vue-simple-suggest/dist/es7')
• [ ] Bundled version (import VueSimpleSuggest from 'vue-simple-suggest')
• [ ] CommonJS (const VueSimpleSuggest = require('vue-simple-suggest'))
• [ ] UMD Component (<script type="text/javascript" src="https://unpkg.com/vue-simple-suggest"></script>)

Please tell us about your environment:

• Vue.js Version: 2.6.11
• Vue-simple-suggest version: 1.10.2
• Browser: [all Chrome 86.0.4240.198 | Firefox 82.0.3 ]
• Language: ES6/7 | ES5

• Other information (e.g. detailed explanation, stack traces, related issues, suggestions how to fix, links for us to have context, eg. StackOverflow, Gitter, etc)

Sample code

   <div class="md-form">
                                          <vue-simple-suggest
                                              v-show="!city.isCityLoading"
                                              v-model="city.searchInput"
                                              :debounce="1000"
                                              :min-length="2"
                                              display-attribute="name"
                                              value-attribute="id"
                                              :list="getCity"
                                              :filter-by-query="false"
                                              @select="citySelect"
                                          >
                                            <input
                                                type="search"
                                                class="form-control"
                                                :placeholder="$t('friend_city_of_birth_placeholder')"
                                                value=""
                                                autocomplete="false"
                                            >
                                          </vue-simple-suggest>
                                          <b-form-input
                                              v-if="city.isCityLoading"
                                              :disabled="true"
                                              :placeholder="$t('cityLoading')"
                                              type="text"
                                              class="form-control"
                                          > </b-form-input>
                                        </div>
                                          ....
                                      data: () => ({
                                          city: {searchInput: null, value: null, isCityLoading: false},
                                     }),
                                     methods: {
                                        // make api call to get suggestions
                                       getCity() {
                                           this.user.city.isCityLoading = true

                                           return asyncPostData( '/api/cities/search', {'cityPattern' : this.user.city.searchInput})
                                              .then(function(data) {
                                                  return  data;
                                              }.bind(this))
                                              .finally(function () {
                                                   this.user.city.isCityLoading = false;
                                              }.bind(this));
                                         },
                                        // trigger on selecting some value from suggestions list
                                        citySelect(value) {
                                             this.user.city.value = value;
                                        },
                                     }

Here also an image of how the input looks like on Chrome with that blue x sign https://gyazo.com/9d011021aab8d55e8ac33dbbbb478543

[xlcrr]

Fixed by wrapping vss in a form and adding autocomplete="off" to the form element

[bogdan-dubyk]

I tried with a autocomplete="off" and did not work. I'm not sure what is a vss, sorry:( can u.show me or link to the place I can read about it?

[xlcrr]

<form autocomplete="off">
   <vue-simple-suggest />
</form>

[bogdan-dubyk]

Oh lol, vss is vue-simple-suggest :)

[xlcrr]

Did it work for you too? Can close this issue if so

[bogdan-dubyk]

Sorry, I did not try it yet, let u know a bit later

[bogdan-dubyk]

no, it's not working for me, I tried to wrap all fields with a <form autocomplete="off"></form> and directly vss as you propose and it's not working :( , And actually as I told I think I already tried that before

[xlcrr]

Do you need this nested <input> element? Try give that autocomplete="false" as well as the form, and try remove it to see if that fixes it. I don't have a nested input element and wrapping vss in a form worked for me

[bogdan-dubyk]

k, I'll try it tomorrow, it's late for me, thanks! And the reason I have that nested element is b-z I need to set a custom class and placeholders, can I do It without nesting that input???

[xlcrr]

Try a simple version first, then add another layer of complexity and see where it breaks

[bogdan-dubyk]

well, now I'm not sure if it's related to autocomplete, when I remove nested input that cross sign gone, but still the dropdown not appearing. I make small videos to show how it works on Chrome and on Firefox (same on safari) , as u can see it working on Firefox.. not sure if it can be helpful.

Not code looks like this:

                            <form autocomplete="off">
                                          <vue-simple-suggest
                                              v-show="!city.isCityLoading"
                                              v-model="city.searchInput"
                                              :debounce="1000"
                                              :min-length="2"
                                              display-attribute="name"
                                              value-attribute="id"
                                              :list="getCity"
                                              :filter-by-query="false"
                                              @select="citySelect"
                                          >
                                          </vue-simple-suggest>

                            </form

[kaskar2008]

Hello @bogdan-dubyk

Can you provide us a link to reproduction repo/jsfiddle/jsbin stand? Would be much easier to do some debugging. We are using VSS in our production projects and got no such issue.

[bogdan-dubyk]

Sure @kaskar2008 , I'll prepare some sample code

[bogdan-dubyk]

Here is the code sandbox example I made, where I can reproduce the bug https://codesandbox.io/s/stupefied-flower-q3xz4?file=/src/App.vue (HTML is broken as I remove most of the logic)

[bogdan-dubyk]

Is someone able to reproduce the issue and have any thought on how to fix it???

[xlcrr]

Can you simplify the code example? No need for it to be 650 lines

[bogdan-dubyk]

sure, here it is https://codesandbox.io/s/vigorous-cartwright-fiyb3

[bogdan-dubyk]

any updates? :)