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

What could be causing the reliability issue with this particular Angular JS code for dropdown menus?

Attempting to create a dynamic country-city dropdown menu using AngularJS <div> Country: </br> <select data-ng-model="country" ng-options="country.name for country in countries" data-ng-change="updateCountry(country) ...

javascripthtmlangularjsjson

Is there a way to disregard the data returned from previous AJAX calls?

I've been wondering about a strategy for managing delayed AJAX data returns in a scenario where newer calls should take precedence over earlier ones. For instance, if a first data fetch initiated at 12:01:33 is delayed and comes back at 12:01;39, whil ...

javascriptajaxfetch

Return a string to the client from an express post route

I'm attempting to return a dynamically generated string back to the client from an Express post route. Within the backend, I've set up a post route: router.post('/', async (req, res) => { try { // Here, I perform computations on ...

javascriptexpressnodes

Can someone help me figure out this lengthy React error coming from Material UI?

Issues encountered:X ERROR in ./src/Pages/Crypto_transactions.js 184:35-43 The export 'default' (imported as 'DataGrid') could not be found in '@material-ui/data-grid' (potential exports include: DATA_GRID_PROPTYPES, DEFAULT ...

javascriptreactjsmaterial-uidatagrid

Issues with jQuery requests not working properly on the mobile application

Creating a mobile application for Android devices using Intel XDK has been a rewarding experience so far. I have been testing my PHP code on an emulator and local development server (127.0.0.1) through AJAX methods such as $.ajax(), $.post(), and $.get(). ...

javascriptphpandroidjqueryajax

Experience the innovative feature of React Splide Carousel where a peek of the next image is shown until you reach

My current challenge arises when I reach the last slide in the slider. I am trying to prevent it from looping and instead stop with no extra space or any other images peeking out. To address this, I have utilized the padding: '5%' option, which ...

javascriptcssreactjssplidejs

How can I set up a KeyboardEvent listener in JavaScript?

My attempt to use @keydown resulted in an error: Type 'Event | KeyboardEvent' is not assignable to type 'KeyboardEvent'. Type 'Event' is missing the following properties from type 'KeyboardEvent': altKey, c ...

typescriptvue.js

Error code 400 encountered during an HTTP POST request - issue stems from incorrect design of views and serializers

I keep encountering the following error: POST http://127.0.0.1:8000/api/creator_signup/ 400 (Bad Request) Every time I try to send data from my AngularJS application to my Django backend. When making a POST request, I used the following code (): fun ...

javascriptpythonangularjsdjango

Utilizing Jquery for precise element placement and retrieving its position details

Within my bundle of jQuery code, there are a few areas where I am experiencing difficulties trying to recall functions. The following is an excerpt of the code: $(document).ready(function(){ $("#myTablePager").html(""); $.ajax({ type: "POS ...

javascriptphpjqueryajaxtwitter-bootstrap

The Vuetify theme seems to be getting overlooked

I recently created a file in my plugins directory with the following code snippet: import Vue from "vue"; import Vuetify from "vuetify/lib/framework"; Vue.use(Vuetify); export default new Vuetify({ theme: { themes: { light ...

vue.jsvuejs2vuetify.js

What is the best approach for filtering a nested array in this scenario?

Here is the response I am getting: let m = [ { name: 'Summary', subListExpanded: false, subList: [ ] }, { name: 'Upload', subListExpanded: false, subList: [ ...

javascriptarraysjsontypescriptfiltering

What will occur if I use an XMLHttpRequest to request a file that is currently being downloaded?

My goal is to enhance links in a progressive manner using the PJAX style. My plan was to layer this on top of some regular prefetch <link>s: <link rel="prefetch" href="next.html"/> If the browser has already downloaded next.html, then the PJA ...

javascripthtmlajaxprefetch

Add a new key-value pair to the mock data by clicking on it

Hey there! I'm currently tackling a task that involves toggling the value of a boolean and then appending a new key-value pair on click. I've been attempting to use the . operator to add the new key-value pair, but it keeps throwing an error. In ...

javascriptreactjsarrays

Is there a method in AngularJS to submit form data when the input fields are pre-populated using a GET request?

How do I submit form data in AngularJS? I have a div that populates the input field from a GET request. Now, I want to send this data using a POST method. How can I achieve this? Below is the form div: <div class="row" ng-app="myApp" ng-controller="myC ...

javascriptjqueryhtmlangularjs

issues with the handler not functioning properly in html and javascript

<form method="post" action="."> <label class="input-label">Enter Your First Name</label><input field="first_name" class="input-edit" maxlength="30" type="text" value="{{ user.first_name }}" /> <label class="i ...

javascripthtml

Navigate to the date selector and select the following month

<button class="mat-calendar-next-button mat-icon-button" mat-icon-button="" type="button" ng-reflect-disabled="false" aria-label="Next month"><span class="mat-button-wrapper"></span><div class="mat-button-ripple mat-ripple mat-button-r ...

javascriptangularjsprotractorautomated-testse2e-testing

Receiving an alert when the information has been loaded into a computed field

I am currently working on a Vue project that utilizes Vuetify, and I am trying to implement the loading functionality. The items in the project are loaded using a computed field, but now I need to figure out how to manipulate the 'loading' proper ...

vue.jsvuetify.js

When you try to remove an element from an array by its index in Vue JS, the outcome may not be

Here is an array that I have: var hdr = ("name", "date", "start_time", "selling_item", "total_call", "end_time", "ad_num", "area", "order_num"); //this data comes from the database Now, I need to rename these array elements according to prope ...

javascriptarraysvue.jsarray-splice

The cURL command successfully executes the request, however, it fails to work in both Postman and web browsers

A problem arises when the Node Js (express) server responds to requests using cUrl, resulting in an infinite load. However, when requested via Postman or a browser, there are no errors but still faces issues. Despite searching for solutions, none of the s ...

javascriptpostgresqlexpressubuntu

Error in Discord Bot: discord.js showing TypeError when trying to read the length of an undefined property

I'm currently working on developing a Discord bot and using CodeLyon's Permissions V2 video as a guide for reference. There seems to be an issue in my message.js file which contains the following code: require('dotenv').config(); //cre ...

javascriptnode.jsdiscorddiscord.jsbots