MadimetjaShika / vuetify-google-autocomplete

A Vuetify ready Vue.js autosuggest component for the Google Places API.

Home Page:https://madimetjashika.github.io/vuetify-google-autocomplete/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Default label somehow is not overridden by user-defined label or placeholder

nwoodr94 opened this issue · comments

I'm using the component and trying to define my own label, as follows:

<vuetify-google-autocomplete id="map" label="Test" hint="Location" v-on:placechanged="geocode" > </vuetify-google-autocomplete>

On render, the component displays both "Test" (expected), and "Enter a location", presumably a default.
The default placeholder goes away after clicking on the component, leaving just "Test".

vueitfy-google-autocomplete

Here are my dependencies:
"dependencies": { "axios": "^0.21.1", "core-js": "^3.6.5", "papaparse": "^5.3.1", "vue": "^2.6.11", "vue-router": "^3.5.2", "vuetify": "^2.4.0", "vuetify-google-autocomplete": "^2.0.4", "vuex": "^3.6.2" },

I'm sure you figured this out, but for anyone who stumbles upon this:

If you want to use a label, you cant have a placeholder. BUT you cant remove the placeholder, so you need to make the placeholder transparent

<style scoped>
/* where #map is your id, note I am using a hex, with alpha of 00 */
/deep/ #map::placeholder {
  color: #00000000 !important;
}
</style>