Removing entered text from a Vuetify V-autocomplete once a selection has been made from the dropdown menu

One issue I'm encountering involves a v-autocomplete field with a drop-down list of items. It allows for multiple selections.

<v-autocomplete 
  v-model="defendantCode"
  label="Defendant Code"
  :items="defendantCodeOptions"                          
  :loading="defendantCodeIsLoading"
  :filter="customFilter"
  :clear-on-select="true"
  clearable
  multiple
  dense>
</v-autocomplete>

The problem arises when a user begins typing to filter the list, then selects an item. The typed text remains in the field and does not get replaced by the selected item.

Is there a way to clear the text when an item is selected?

For example:

  1. User has a drop-down list for item selection.

https://i.sstatic.net/AJ3jr.png

  1. User types in an item to filter.

https://i.sstatic.net/e4yg2.png

  1. User selects an item, but the initial text remains in the field.

https://i.sstatic.net/7HOvr.png

javascriptvue.jsvuetify.jsv-autocomplete

Answer №1

This particular scenario piqued my interest; however, a closer look at the component code revealed the existence of a "searchInput" prop, which is the key element you're seeking.

Therefore, you need your <autocomplete> to incorporate the @input and :search-input properties.

    <v-autocomplete 
        v-model="defendantCode"
        label="Defendant Code"
        :items="defendantCodeOptions"                          
        :loading="defendantCodeIsLoading"
        :filter="customFilter"
        clearable
        multiple
        dense
        @input="searchInput=null"
        :search-input.sync="searchInput">
    </v-autocomplete>

Next, you should add a data property for searchInput:

    data() {
        return {
            ...
            searchInput: null,
            ...
        },

That covers it.

Also, it appears that you may have assumed the existence of :clear-on-select when in fact it doesn't have any effect.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the purpose of encasing the routes within the <Switch> element in react-router, when they seem to function perfectly fine without it

Currently utilizing react-router-dom version 5.2.0. As a practice, I typically enclose all my Route components within a Switch component. For instance: const MyRoutes = () => ( <Switch> <Route path='/route1' exact ...

javascriptreactjsreact-routerreact-router-dom

Discovering the most recent messages with AJAX

I'm feeling a bit lost on this topic. I'm looking to display the most recent messages stored in the database. (If the messages are not yet visible to the user) Is there a way to achieve this without constantly sending requests to the server? (I ...

javascriptphpjqueryajaxchat

Guide on building a "like" button using a Node.js Express application

I am in the process of developing a website using node, express, and mongodb. I am facing an issue with passing a variable value from my ejs file to the server side. Can someone help me solve this problem? Here is what I have attempted so far: Example Ht ...

javascriptnode.jsmongodbexpress

Obtaining HTML data with ajax within a WordPress post

Greetings! I've been putting together a website and I'm eager to include a unique timeline in each of my posts. I'm utilizing WordPress for this project. However, since the timeline I want to insert will vary from post to post, I am unable t ...

javascriptphphtmlcssajax

Is JsonEditor capable of editing JSON Schemas effectively?

For a while now, I have been impressed by the functionality of JSON-editor and have been using it to edit documents based on a specific JSON schema. But why stop there? Many users utilize JSON-Editor to make changes to JSON documents according to the corr ...

javascriptjsonjsonschema

Bringing the Jquery cursor into focus following the addition of an emoji

Looking to add emojis in a contenteditable div but facing an issue with the cursor placement. Here is a DEMO created on codepen.io. The demo includes a tree emoji example where clicking on the emoji adds it to the #text contenteditable div. However, after ...

javascriptjqueryhtmlcss

CKEditor's height automatically increases as the user types

I am using a ckEditor and looking for a way to make its height automatically grow as I type. https://i.stack.imgur.com/m7eyi.png <textarea name="description" id="description"> </textarea> <script> CKEDITOR.replace( 'description ...

javascriptcssckeditorckeditor4.x

JavaScript's Use of Brackets

I’ve been working on a new project that involves adding links. To do this, users can input both the link URL and the text they want displayed. I used a prompt to gather this information. Here’s the code snippet I wrote: document.getElementById(ev.targ ...

javascript

The event listener for browser.menus.onClicked is dysfunctional in Firefox

Currently, I am in the process of developing my own Firefox extension and I have encountered an issue with adding a listener to an onclick event for a context menu item. manifest.json { "manifest_version": 2, "name": "My exten ...

javascriptfirefoxfirefox-addonfirefox-addon-webextensions

Is there a way to incorporate a text box in javascript that displays the retrieved reference count from the database?

I'm currently working on creating a functionality that retrieves rows with the same ID from a database and displays them in a text box. Below is the PHP code I've written for retrieving all the rows: PHP: <?php include_once('pConfig ...

javascriptphp

Nested scrolling bars within each other

Currently, I am importing photos from a Facebook page and displaying them on my jQuery mobile webpage using the photoSwipe plugin. However, there seems to be an issue with the final appearance of the images. Pay attention to the image where the red arrow ...

javascriptjqueryhtmlscrollbar

Jest is unable to utilize Higher Order Components from JavaScript files, but it functions properly with Higher Order Components from TypeScript files

When I try to import an HOC from a tsx file, everything works fine. However, when I change the extension to js, Jest throws an error: Jest encountered an unexpected token. This usually indicates that you are attempting to import a file that Jest is unabl ...

javascriptreactjsjestjs

Using a Node.js module to shrink HTML files

Is there a way to minify HTML before rendering it? I'm aware of console minifiers like: html-minifier However, I am looking for a solution that can be implemented in the code itself. Something along the lines of: var minifier = require('some- ...

javascripthtmlnode.jsminify

Can Vue instances be given custom names in Vue DevTools?

Currently, I am working on a website that involves several Vue instances. I have a quick question: Can these instances be labeled and displayed with their names using vue-devtools? At the moment, my console is showing instances in a way that makes it dif ...

vue.jsvuejs2vue-devtools

Ways to terminate and fulfill a promise

Each time I execute this snippet of code, a promise is returned instead of the data being inserted into my database. Unfortunately, I am unable to utilize the await keyword due to it not being in a top-level function. Specifically, I receive the message: & ...

javascriptnode.jsmongodbexpressmongoose

I am struggling to successfully upload a video in Laravel

In this section, the Ajax functionality is used to add a video URL to the database. The values for the Video title and description are successfully being saved in the database, but there seems to be an issue with retrieving the URL. <div class="m ...

javascripthtmljqueryajaxlaravel

Vite was anticipating to find a "greater than" sign, however it encountered the word "class" instead

I keep encountering these issues when running vite build. It's as if Vite is struggling to properly interpret the HTML. Expected ">" but encountered "class" 1 | <template> 2 | <div class="dashboard container"> | ...

vue.jsvuejs2vite

Hierarchy-based state forwarding within React components

As I embark on the journey of learning Typescript+React in a professional environment, transitioning from working with technologies like CoffeeScript, Backbone, and Marionettejs, a question arises regarding the best approach to managing hierarchical views ...

javascriptreactjsuser-interfacetypescriptfrontend

What is causing the component to render three times?

Below is the structure of my component: import { useEffect, useState } from "react"; function Counter() { const [count, setCount] = useState(0); console.log("comp run"); const tick = () => { setCount(count + 1); conso ...

javascriptreactjsuse-state

Error: Call stack size limit reached in Template Literal Type

I encountered an error that says: ERROR in RangeError: Maximum call stack size exceeded at getResolvedBaseConstraint (/project/node_modules/typescript/lib/typescript.js:53262:43) at getBaseConstraintOfType (/project/node_modules/typescript/lib/type ...

javascriptnode.jsangulartypescriptnpm