ihsan kocak
ihsan kocak

Reputation: 1581

First character not typed when item text selected with cursor in v-autocomplete

With v-autocomplete 1.8.2, clicking input field then selecting an item and then selecting with cursor the selected item in input field see picture. Finally if i type, first character not written on the input field, but second third etc. characters are written. i tried hard to set the first character via javascript but i could not.is this a bug or something that can be configured? My .vue file is:

<template>
  <c-auto-complete :items="items" v-model="company" :get-label="gCompany" :min-len="0" :component-item='cList' :wait="150" @update-items="updateCompany" />
</template>
<script>
  import router from '@/router'
  import { search } from '@/shared/commonUtil'
  import cList from '../CompanyList'
  import AutoComplete from 'v-autocomplete'
  import { createNamespacedHelpers } from 'vuex'
  const { mapState, mapActions, mapGetters } = createNamespacedHelpers('company')

  export default {
    name: 'header-select-company',
    components: {
      cAutoComplete: AutoComplete
    },
    data: () => {
      return {
        company: {},
        cList: cList,
        items: []
      }
    },
    computed: {
      ...mapState([
        'companies', 'cCode', 'cName'
      ]),
      ...mapGetters([
        'getCompany'
      ])
    },
    methods: {
      ...mapActions([
        'setCompany'
      ]),
      updateCompany (word) {
        console.log('AAAAAAAAAAAAAAAAA - ' + word.charCodeAt(0))
        this.items = search(this.companies, word)
      },
      gCompany (item) {
        if (item) {
          return item.name
        }
        return ''
      }
    },
    watch: {
      company (val) {
        if (val && (val['code'] !== this.cCode && val['name'] !== this.cName)) {
          this.setCompany(val)
          if (this.$router.currentRoute.path === '/dashboard') {
            router.go()
          } else {
            // router.push('/dashboard')
            router.go()
          }
        }
      }
    },
    created () {
      this.company['code'] = this.cCode
      this.company['name'] = this.cName
    }
  }
</script>
<style>
  .v-autocomplete .v-autocomplete-input-group.v-autocomplete-selected .v-autocomplete-input{color:green;background-color:#f2fff2;height: 35px;
    margin-right: 15px;}.v-autocomplete .v-autocomplete-list{width:100%;text-align:left;border:none;border-top:none;max-height:400px;overflow-y:auto;border-bottom:1px solid #157977}.v-autocomplete .v-autocomplete-list .v-autocomplete-list-item{cursor:pointer;background-color:#fff;padding:10px;border-bottom:1px solid #157977;border-left:1px solid #157977;border-right:1px solid #157977}.v-autocomplete .v-autocomplete-list .v-autocomplete-list-item:last-child{border-bottom:none}.v-autocomplete .v-autocomplete-list .v-autocomplete-list-item:hover{background-color:#eee}.v-autocomplete .v-autocomplete-list .v-autocomplete-list-item abbr{opacity:.8;font-size:.8em;display:block;font-family:sans-serif}pre{white-space:pre-wrap;background-color:#eee;border:1px solid silver;padding:20px!important;border-radius:10px;font-family:monospace!important}.left,pre{text-align:left}.note{border-left:5px solid #ccc;padding:10px}.v-autocomplete{position:relative}.v-autocomplete .v-autocomplete-list{position:absolute}.v-autocomplete .v-autocomplete-list .v-autocomplete-list-item{cursor:pointer}.v-autocomplete .v-autocomplete-list .v-autocomplete-list-item.v-autocomplete-item-active{background-color:#f3f6fa}
</style>

Upvotes: 0

Views: 284

Answers (1)

ihsan kocak
ihsan kocak

Reputation: 1581

after downgrading to 1.8.0 it is fixed.

Upvotes: 1

Related Questions