vue-simple-suggest
vue-simple-suggest copied to clipboard
autocomplete not working on chrome, probably to browser autocomplition functionality
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
Fixed by wrapping vss
in a form and adding autocomplete="off"
to the form element
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?
<form autocomplete="off">
<vue-simple-suggest />
</form>
Oh lol, vss is vue-simple-suggest :)
Did it work for you too? Can close this issue if so
Sorry, I did not try it yet, let u know a bit later
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
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
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???
Try a simple version first, then add another layer of complexity and see where it breaks
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
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.
Sure @kaskar2008 , I'll prepare some sample code
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)
Is someone able to reproduce the issue and have any thought on how to fix it???
Can you simplify the code example? No need for it to be 650 lines
sure, here it is https://codesandbox.io/s/vigorous-cartwright-fiyb3
any updates? :)