Set initial value fro Vuetify autocomplete with server site search

Viewed 223

I am using a v-autocomplete component to search for places on the google api. So the items array gets filled after the search input is set. Now I'm trying to set a default value to be searched before the user makes an input to suggest a train station.

E.g. the search is opened for the city London, now I wan't to set the search input to London Train Station so the user sees the results for that search. However, when I set the search input to a default value it get's reset to null every time.

Here is my template:

    <v-autocomplete
      ref="trainStationSearch"
      v-model="select"
      :items="places"
      :search-input.sync="searchTerm"
      no-filter
      return-object
    >
      <template #item="data">
        <v-list-item-content>
          <v-list-item-title>{{ data.item.title }}</v-list-item-title>
          <v-list-item-subtitle>{{ data.item.subtitle }}</v-list-item-subtitle>
        </v-list-item-content>
      </template>
    </v-autocomplete>

And here the logic:

  • I have a watcher on searchTerm, which triggers a debounced search with Lodash's debounce function
  • I try to set searchTerm in the mounted hook with the value of the prop prefill
    • Doing it with the timeout triggers the watcher on searchTerm and shows the value of prefill on the input of the v-autocomplete component. Shortly after searchTerm is reset to null
    • Doing it without a timeout results in searchTerm being set to null immediately
  @Prop() readonly prefill?: string

  private places: any = []
  private searchTerm: string | null = ''
  private select: any = null

  private searchGoogle = _.debounce(
    async (val: string, context: Vue): Promise<void> => {
      if (val) {
        // doing the request to my API, which returns the google results
        const data = await apiManager.searchPlaces(val)
        // set the items array to the google results
        this.$set(context, 'places', data.predictions)
      }
    },
    1000
  )

  @Watch('searchTerm')
  private searchPlaces(val: string): void {
    if (val?.trim().length > 0) {
      // trigger debounced request
      this.searchGoogle(val, this)
    } else {
      // empty places array
      this.places.splice(0, this.places.length)
    }
  }

  @Watch('select')
  private handleSelection(): void {
    if (!this.select) {
      return
    }

    // handle selection
  }

  private mounted() {
    if (this.prefill) {
      setTimeout(() => {
        this.searchTerm = this.prefill!
      }, 1000)
    }
  }
1 Answers

I've gone to the official vuetify discord to get an answer to this and found out that resetting the search-input with my given conditions is just the intended behaviour. With that in mind I tried to figure out what is the difference between setting the search-input programmatically and manually typing in the text field to mutate the search-input. It's the focus of the text field.

So the workaround for me was to call focus() on the autocomplete element before setting the searchTerm

Related