Clearing the input when an item has been selected

[robjbrain]

I'm submitting a ...

• bug report
• feature request
• support request

What is the current behavior?

When an item is selected the old input stays there.

What is the expected behavior?

There should be a simple way to clear the old input after an item has been selected

How are you importing Vue-simple-suggest?

• ESNext (original code, single-file .vue component, css included) (import VueSimpleSuggest from 'vue-simple-suggest/lib')
• 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>)

What is the motivation / use case for changing the behavior?

I'm not sure if this is a support request or a feature request, it depends on whether or not it's actually possible. It seems like a simple enough request, but a little dive into the code suggests it might not be possible.

When an item is selected i'd like to clear the text from the input field.

The following doesn't work:

<vue-simple-suggest ... ref="input" @select="onSelect" ...></vue-simple-suggest>

onSelect (suggestion) {
    this.$refs.input.text = ''
    this.someActionWithMySelection(suggestion)
    // presumably this fails because the full text from the selection is set as the input field after i've cleared it?
},

<vue-simple-suggest ... v-model="suggested_item" @select="onSelect" ...></vue-simple-suggest>

onSelect (suggestion) {
    this.suggested_item = ''
    this.someActionWithMySelection(suggestion)
},

From what I can tell it's literally impossible because of this little snippet of code:

    autocompleteText (text) {
      this.$emit('input', text)
      this.inputElement.value = text
      this.text = text
    },
    select (item) {
      this.hovered = null
      this.selected = item

      this.$emit('select', item)

      this.autocompleteText(this.displayProperty(item))
    },

Since my onSelect method will always be called when this.$emit('select', item) happens anything I do will always be overwritten by the next line where it auto completes this.autocompleteText(this.displayProperty(item))

1. Is there a way around this to clear the input after a selection?

One thing I have considered is clearing on focus and blurring after selection but this.$refs.input.blur() throws an error and this.$refs.input.$el.blur() doesn't seem to actually blur.

2. If there is literally no way to do this at present, can it please be added as a feature request for V2? Not necessarily as default behaviour, but as a possibility.

[RMFogarty]

The way I solved this is a bit of hack but seems to work. First I set the model binding of the input to the same variable that is bound to the suggest component (v-model="chosen"):

                <vue-simple-suggest
                v-model="chosen"
                :list="search"
                :filter-by-query="false"
                @select="select"
                @blur="blur"
                ref="suggestComponent">
                    <div slot="suggestion-item" slot-scope="{ suggestion, query }">
                        <div v-html="formatSuggestion(suggestion, query)"></div>
                    </div>
                    <input type="text" v-model="chosen" class="form-control" />
                </vue-simple-suggest>

Then on the select event after nextTick I set the model variable to empty:

        select(item) {
            if(item) {
                this.displayUser(item);
                this.$nextTick(() => {
                    this.chosen = '';
                })                
            }
        },

[robjbrain]

Thanks that works!

Although it is a horrible hack, hopefully this gets resolved in a future release.

For anyone (like me) that finds this and doesn't know what $nextTick is:
https://stackoverflow.com/questions/47634258/what-is-nexttick-or-what-does-it-do-in-vuejs

The key concept to understand is that the DOM is updated asynchronously. When you change a value in Vue, the change is not immediately rendered to the DOM. Instead, Vue queues a DOM update and then, on a timer, updates the DOM. Normally, this happens so fast that it doesn't make a difference, but, at times, you need to update the rendered DOM after Vue has rendered it, which you can't immediately do in a method because the update hasn't happened yet. In those cases, you would use nextTick.

[Raiondesu]

Hello, @robjbrain. This will indeed be resolved in a future 1.9.0 release!

Thank you for using our little component!

As for the issue, I'll keep it open for task-management purposes.

---

P.S. @RMFogarty, great workaround btw!

[sullivanpt]

As far as I can tell the "fix" introduced in commit b159ce6 doesn't help and worse it breaks the work-around @RMFogarty suggested. Now after the 'select' event is run it waits for nextTick via setText and THEN overwrites my changes to the text. Maybe a better solution would be to unwind the 'setText/nextTick' change and instead use one of the following:

• in select mode never change the input on select, or only do it when a flag is given
• have the select event return a boolean that can disable setting the input event directly
• reorder the select event so it happens after the input text is changed to the selected

P.S. I like the control, it's very flexible. thanks!