Introducing Vuetify 3's v-file-input with interactive clickable chips!

I noticed an unexpected issue with the v-file-input component in Vuetify3. In Vuetify 2, it was possible to use the selection slot to customize the display of selected files. This functionality still works in both versions, as mentioned in the documentation for V3 and V2.

However, when attempting to create a basic closable chip, I found that the hover or click events were not triggering at all. This issue is similar to the one described in a previous post related to Vuetify 2, which can be found here.

It appears that the input element always takes priority over the chips, which are now located within a separate element from the input itself. As a result, user interactions with the chips, such as deleting one of multiple imported files or basic hover events, are no longer functioning properly.

Are there any workarounds for this issue other than reverting back to Vuetify 2? You can test the playground where I'm investigating this further here.

javascriptvue.jsvuejs3vuetify.jsvuetifyjs3

Answer №1

To achieve this functionality, specific styles are required as in Vuetify2, since in Vuetify 3 the input is set to position:absolute and positioned on top of the chips.

<style>
  .v-field__field {
    height: 60px;
  }
  .v-field__input {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
  }
</style>

Click here for an example

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

Show divs in identical position when clicking

There are 4 section divs that need to be displayed in the center of the page when clicked, but the last one appears further down. This is likely due to the flex box nature. What is the best way to ensure all sections appear at the exact same location? Ano ...

javascripthtmlcss

The 'wrapper' property is not present in the 'ClassNameMap<never>' type in Typescript

Hey there, I've been encountering a puzzling issue in my .tsx file where it's claiming that the wrapper doesn't exist. My project involves Material UI and Typescript, and I'm relatively new to working with Typescript as well as transiti ...

javascriptreactjstypescriptmaterial-ui

How come my Bootstrap tooltip title only updates once when I use the keydown event in jQuery?

My goal is to provide users with a character count for text inputs and textareas based on a maximum limit. To achieve this, I have added tooltips to elements with a data-maxlength attribute. I update the tooltip for text inputs to display the current lengt ...

javascriptjquerytwitter-bootstrap

Executing an Ajax request that invokes a PHP function

After receiving valuable information in response to my previous inquiry through this link, I took the initiative to create a code that would notify me via email if it is discovered on another website. Below is the JavaScript code designed for potential co ...

phpjavascriptajaxhttp-post

Unlock the power of Angular pipes in window.open with URL parameters!

<div class="member-img" onclick="window.open(childEpisode.File_URL | fullPath)"> </div> The fullPath function concatenates the domain part to the relative URL stored in file_URL. However, there seems to be an issue as it i ...

javascripthtmlangular

Modifying a section of the source name using jQuery continues to occur repeatedly when the window is resized

I have written a piece of code that is designed to identify the src attribute of all images within a specific div and modify the src name when the window width is less than 900 pixels. The code works perfectly when the page is refreshed, but I encounter an ...

javascriptjqueryhtmlcss

Using React JS, how to easily upload a CSV file to Amazon S3 with your AWS credentials

Seeking guidance on how to utilize AWS credentials to upload a CSV file using React S3 Uploader. The code snippet I've tried so far is as follows: import React, { PureComponent } from "react"; import ReactS3Uploader from "react-s3-uploader"; sav ...

javascriptreactjsamazon-web-servicesamazon-s3file-upload

The error message "NoSuchSessionError: invalid session id" pops up in Selenium, despite the fact that the application is running smoothly

Scenario and Background: I have recently developed a script to access an external website and extract specific data. The script's purpose is to retrieve grades of students and convert them into usable data for plotting. In order to streamline the dat ...

javascriptnode.jsseleniumselenium-webdriverweb-scraping

What is the best way to send checkbox values to ActionResult in MVC5?

I am working on an MVC5 application and within my view, I have the following code snippet: <div class="form-group"> @Html.LabelFor(model => model.CategoryID, "Category", htmlAttributes: new { @class = "control-label col-md-3" }) <div c ...

javascriptjqueryasp.net-mvccheckbox

What is the reason behind arr.reverse() flipping the original array?

My goal is to reverse an array and store the reversed version in a new array without altering the original array. Here is the code I am using: var arr= ["1", "2", "5"] var arrTwo = arr.reverse(); console.log(arrTwo) \\ ["5" , "2" , "1"] console. ...

javascriptjquery

Enhance your Next.js application by including the 'style' attribute to an element within an event listener

I am currently trying to add styles to a DOM element in Next.js using TypeScript. However, I keep getting the error message "Property 'style' does not exist on type 'Element'" in Visual Studio Code. I have been unable to find an answer ...

javascriptreactjstypescriptnext.js

Obtaining template attributes in CKEditor: A guide

I have been working with the template plugin in CKEditor to load predefined templates. Each template is defined as follows: templates: [ { title: "Quickclick 1", image: "template1.png", description: "Quickclick 1 template", html_et: "& ...

javascripthtmlckeditorwysiwyg

send parameter when clicking a link rather than using a hashtag

One interesting feature on my website is a menu link with the attribute title=.roc. When this link is clicked, I want to extract this attribute and click on an element with the same attribute on the destination page. Let's consider a scenario where I ...

javascriptjquery

Using jQuery's deferred.done method to send an array of data to the done function

I followed the method outlined in https://api.jquery.com/jquery.when/ to execute a series of ajax calls (using the example $.when( $.ajax( "/page1.php" ), $.ajax( "/page2.php" ) ) on that page). The code below is functional; however, I am struggling with ...

javascriptjqueryajax

What is the best way to incorporate multiple variables in a MySQL query when using Node.js?

I'm facing a challenge where I need to input student data into a table using the parent key as a foreign key. The parent information is included in the same JSON object, with an array of students inside it. My goal is to retrieve the parent Id from th ...

javascriptmysqljsonnode.jsserver-side

Utilizing JavaScript to Extract JSON Information from Knockout.js

Incorporating knockout into my project has been a great help as I retrieve JSON objects using Ajax. One question that arises is how to effectively utilize this data in my custom JavaScript code: After receiving the mapped item from the ajax call, here is ...

javascriptjsonasp.net-mvcknockout.js

Diagnosing Issues with Yii2's $(document).ready Function

AppAsset: public $js = [ 'plugins/jquery/jquery.min.js', 'plugins/jquery/jquery-migrate.min.js', 'app.js', ]; When I write this in a view file: $script = <<< JS jQuery(document).ready(function( ...

javascriptjqueryyii2

Guide on displaying a real-time "Last Refreshed" message on a webpage that automatically updates to show the time passed since the last API request

Hey all, I recently started my journey into web development and I'm working on a feature to display "Last Refreshed ago" on the webpage. I came across this website which inspired me. What I aim to achieve is to show text like "Last Refreshed 1 sec ago ...

javascripthtmlexpressnpm-package

After compiling, global variables in Vue.js 2 + Typescript may lose their values

I am currently working on a Vue.js 2 project that uses Typescript. I have declared two variables in the main.ts file that I need to access globally throughout my project: // ... Vue.prototype.$http = http; // This library is imported from another file and ...

javascripttypescriptvue.jsvuejs2

Encountering a Sass Dart error "Bad state: Can't access parent outside of a module" while running npm start in a Create React App

My team has come across an unusual error while attempting to npm start a Create React App we are working on. The error message states: Bad state: Can't access __parent outside of a module, resulting in a failed Build process. This issue is new to us, ...

javascriptnode.jsreactjsnpm