The only iOS device I have is an iPad running iOS 12.4.2. I just tried an iPhone 11 on browserstack and that worked too.

Yeah sure I'll just rewrite 54000 lines of code in a few weeks for barely any money. :+1:

Android: button works on long press, icon and text work on either tap or long press

iOS: only works on tap for all three

Environment

Vuetify Version: 2.3.10 Vue Version: 2.6.11 Browsers: Chrome 85.0.4183.102 OS: Mac OS 10.15.6

Steps to reproduce

1. Attach a ref to a v-btn
2. Fire this.$refs[button].click()
3. The error in console is "Cannot read property 'detail' of undefined

Expected Behavior

A button element should allow simulated clicks. In this case, it's because, for accessibility reasons, buttons in our app are triggered with the keyboard. I would have expected to see the click animation (ideally from center, but from 0,0 if an event is not provided is fine too).

Actual Behavior

It just throws an error and gives no visual feedback.

Reproduction Link

<a href="https://codepen.io/matthewdean/pen/GRZPZEj" target="_blank">https://codepen.io/matthewdean/pen/GRZPZEj</a>

<!-- generated by vuetify-issue-helper. DO NOT REMOVE -->

Use this.$refs.button.$el.click()

Environment

Vuetify Version: 2.3.10 Vue Version: 2.6.12 Browsers: Chrome 85.0.4183.83 OS: Windows 10

Steps to reproduce

as the codepen link ,when click this copy button,the active element changed to close button ,and then failed to copy,i don't know why

Expected Behavior

select textarea success,and do copy

Actual Behavior

focus some v-btn components uncorrectly

Reproduction Link

<a href="https://codepen.io/curedovahkiin/pen/JjXeQPX?editors=1010" target="_blank">https://codepen.io/curedovahkiin/pen/JjXeQPX?editors=1010</a>

<!-- generated by vuetify-issue-helper. DO NOT REMOVE -->

Duplicate of #6892

Environment

Vuetify Version: 2.3.10 Vue Version: 3.0.0-rc.13 Browsers: Chrome 85.0.4183.121 OS: Mac OS 10.15.6

Steps to reproduce

translation wrong

Expected Behavior

translation correct

Actual Behavior

translation wrong

Reproduction Link

<a href="https://github.com/wrongtranslation" target="_blank">https://github.com/wrongtranslation</a>

<!-- generated by vuetify-issue-helper. DO NOT REMOVE -->

Translations are all done by the community, if you think something is wrong you're welcome to fix it.

On default values: does anyone differentiate between null and '' in regards to text fields? I'm thinking about setting the default value to null across the board in 2.4 to satisfy #7429 and allow JSON serialization. '' would probably make more sense but may break forms expecting '' to be an actual value rather than a cleared state.

Problem to solve

I apologize if it is written somewhere and I have not read it, I have searched.

Can I use this project with Vue 3? Is there a temporary branch of work in progress that I can try?

Proposed solution

I need to start a new project and need to find out more before starting.

Thank you.

<!-- generated by vuetify-issue-helper. DO NOT REMOVE -->

Duplicate of #11162

~blur is emitted before VTextField gets the blur event, so in the second case validateOnBlur has already been set to false by the time the component knows it's been blurred. When validateOnBlur is false it doesn't validate at all because it assumes validation was already done when you typed. You can account for this event order with setTimeout(() => this.alreadyBlurred2 = true)

Simple tables import the data table css, so you can utilise the class <td class="v-data-table__divider">

Elevation in dark themes is supposed to be indicated by a lightened background colour, which is something we want to look at in v3. Dialogs have 24dp elevation so you'd still want a darker backdrop to contrast the 16% white overlay on the card body. VOverlay has color and opacity props if you want to experiment with changing these for your application (no idea why it isn't a SASS variable).

https://material.io/design/color/dark-theme.html#properties

The overlay should be transparent white

Why? It's a dark theme not an inverted colours theme.

Environment

Vuetify Version: 2.2.11 Vue Version: 2.6.11 Browsers: Chrome 85.0.4183.102 OS: Windows 10

Steps to reproduce

Select a list item and see the difference

Expected Behavior

Whatever I select, the filtered array should be on the list, that is, only the selected item should remain on the site.

Actual Behavior

Only the first item (index:0) meets the expected behaviour but the ones that come later do not work properly.

Reproduction Link

<a href="https://codepen.io/mehmet-ey-polu/pen/abNjNzZ?editors=1100" target="_blank">https://codepen.io/mehmet-ey-polu/pen/abNjNzZ?editors=1100</a>

<!-- generated by vuetify-issue-helper. DO NOT REMOVE -->

Use a unique key instead of the index: https://codepen.io/kaelwd/pen/mdPjPBj?editors=1010

https://discordapp.com/channels/340160225338195969/351121729164410882/755403371485331468

Firefox is applying text-overflow: ellipsis from .v-label to the child element even though neither are overflowing.

Looks like an icon to me

Environment

Vuetify Version: 2.3.10 Vue Version: 2.6.12 Browsers: Chrome 83.0.4103.116 OS: Linux x86_64

Steps to reproduce

Use a v-menu inside an element with position: fixed; on a page with a horizontal scrollbar, and open the menu after scrolling a bit.

Expected Behavior

Menu should be positioned correctly next to activator.

Actual Behavior

Scroll X position is added to menu X position even though the activator is fixed, and the position is incorrect.

Reproduction Link

<a href="https://codepen.io/mvirkkunen/pen/mdPKvoo" target="_blank">https://codepen.io/mvirkkunen/pen/mdPKvoo</a>

Other comments

This was probably introduced by #5527. The activatorFixed property should be checked and scroll position ignored if it's true.

<!-- generated by vuetify-issue-helper. DO NOT REMOVE -->

Duplicate of #12078

Environment

Vuetify Version: 2.3.10 Vue Version: 2.6.12 Browsers: Edge 85.0.564.51 OS: Windows 10, Linux

Steps to reproduce

I created two list. One with to and one without to. 1 Expected to see the first item was activated in both lists. 2 randomly click on the items of either list

Expected Behavior

1 The first list item is activated at first 2 I set the value of the v-list-item-group to the same variable, so the item with the same name should be activated together.

Actual Behavior

1 The first item was activated in the second list, while not being activated in the first list. 2 When click randomly, two list was not the same. (Click more times and you will see this. It's random. : ) )

Reproduction Link

<a href="https://jsfiddle.net/AndersonZhang/k074ntde/" target="_blank">https://jsfiddle.net/AndersonZhang/k074ntde/</a>

Other comments

Hope to find a solution.

<!-- generated by vuetify-issue-helper. DO NOT REMOVE -->

When click randomly, two list was not the same

The first one uses the router as its source of truth, v-model is ignored.

v-list-item-group is not intended to be used with route links.

This was a problem in v2 as well for libraries using Vue.extend(), there's some discussion about it in https://github.com/vuetifyjs/vuetify/discussions/4068

https://github.com/chrisvfritz/prerender-spa-plugin/issues/61

https://github.com/vuetifyjs/vuetify/issues/7703

Environment

Browsers: Chromium 80.0.3987.87 OS: Ubuntu undefined

Steps to reproduce

1. create a vue project with sass support (dart-sass)
2. add vuetify by cli (vue add vuetify) and choose default option
3. add variables.scss to src/styles/variables.scss:

$grid-breakpoints: (
  'xxs': 0,
  'xs': 375,
  'sm': 600px,
  'md': 960px,
  'lg': 1280px - 16px,
  'xl': 1920px - 16px,
  'xxl': 2560px - 16px
);

4. add this template somewhere and inspect it by devtools:

    <v-row>
      <v-col cols="12" md="4">1</v-col>
      <v-col cols="12" md="4">1</v-col>
      <v-col cols="12" md="4">1</v-col>
    </v-row>

Expected Behavior

CSS specificity of .col-12 should be less than col-md-4

Actual Behavior

CSS specificity of .col-12 is higher than col-md-4, so col-md-4 never applies.

Reproduction Link

<a href="" target="_blank"></a>

Other comments

vuetify version: 2.2.17 sass version: 1.25.0 vuetify-loader version: 1.4.3

Github source for sample project: https://github.com/mort3za/temp-vuetify

<!-- generated by vuetify-issue-helper. DO NOT REMOVE -->

Duplicate of https://github.com/vuetifyjs/vuetify/issues/7933

[Vuetify] Image load failed

src: data:image/jpeg;base64,bW9kdWxlLmV4cG9ydHMgPSBfX3dlYnBhY2tfcHVibGljX3BhdGhfXyArICJpbWcvbG9naW4uZDZkM2JiMDkuanBnIjs=

found in

---> <VImg> <VContent> <PagesCoreView> at src/views/pages/components/core/View.vue <VApp> <PagesIndex> at src/views/pages/Index.vue <App> at src/App.vue <Root>

This Issue is being closed due to inactivity.

If you have any additional questions, please reach out to us in our Discord community.

Environment

Vue: 2.6.11 Vuetify: 2.3.1 Browsers: Chrome 85.0.4183.83 OS: Linux x86_64

Steps to reproduce

Insert a v-img tag: <v-img src="./assets/logo.png"></v-img>

Expected Behavior

<div class="v-image__image v-image__image--contain" style="background-image: url('/img/logo.47217774.png'); background-position: center center;"></div>

Actual Behavior

<div class="v-image__image v-image__image--contain" style="background-image: url('https://onlinebus.kz/img/logo.47217774.png'); background-position: center center;"></div>

The issue arises when prerendering is used (prerender-spa-plugin). If you look at this page you'll find this:

...
<div class="v-image__image v-image__image--contain" style="background-image: url('http://localhost:8000/img/logo.47217774.png'); background-position: center center;"></div>
...

If the loader wouldn't add unnecessary host and port, I guess it'll resolve the issue.

Reproduction Link

OnlineBus.kz

<!-- generated by vuetify-issue-helper. DO NOT REMOVE -->

That's based on your webpack config's output.publicPath

Duplicate of #2054

This sounds like a bug report, not a feature request. Please open a new issue with the relevant information.

If you're talking about v-date-picker we just use toLocaleDateString, if it's translated wrong that's probably the browser's fault.

Problem to solve

It should be similar to English format (Thu, Sep 10). The way it is it's not quite elegant.

Proposed solution

The way it is today: "qui., 10 de set.". This is not a good approach. It could be "Qui, Set 10" or "Quinta, Set 10".

<!-- generated by vuetify-issue-helper. DO NOT REMOVE -->

I could not find where to change it.

Environment

Browsers: Chrome 85.0.4183.83 OS: Windows 10

Steps to reproduce

Click on the codepen button I'm logged out of codepen. Now go to https://codepen.io/login and login and try it again, i'm logged out again..

Expected Behavior

Not loggin off automatically

Actual Behavior

I'm getting logged out

Reproduction Link

<a href="https://vuetifyjs.com/en/components/floating-action-buttons/#fab-with-speed-dial" target="_blank">https://vuetifyjs.com/en/components/floating-action-buttons/#fab-with-speed-dial</a>

Other comments

I'm not sure if vuetify does something wrong or if this is a codepen issue..

<!-- generated by vuetify-issue-helper. DO NOT REMOVE -->

Must be a codepen bug, we just use prefill. I've reported it to codepen support.

@flyingL123 that codepen is using 2.3.7

Specifies an array of filenames or patterns that should be skipped when resolving include

None of these are in an included path

this file was renamed to vuetify because the $ was causing problems with the new docs structure.

These were copied from vue, idk if the lodash ones are any different

Environment

Vuetify Version: 2.3.x (tested with .0 and .10) Vue Version: 2.6.12 Browsers: Chrome 84.0.4147.105 OS: Mac OS 10.14.6

Steps to reproduce

• install 2.3.x version of vuetify
• configure vuetify to use fa
• download font awesome scss files and import them

Expected Behavior

Duotone icon to appear

Actual Behavior

Just half of the icon appears

Reproduction Link

No actual reproduction link because duotone icons are part of font awesome premium. However, after some investigating I found out that the duo icons are two separate "fonts", that are built using :before and :after and the following changes to .v-icon:after, broke this:

The culprits are background-color, height, opacity, position, transform, width.

Other comments

I hotfixed this on my project by forcing these styles to be inherit

.v-icon.fad::after {
  background-color: inherit;
  border-radius: inherit;
  display: inherit;
  opacity: 0.4;
  height: inherit;
  width: inherit;
  position: inherit;
  -webkit-transform: inherit;
  -ms-transform: inherit;
  transform: inherit;
}

<!-- generated by vuetify-issue-helper. DO NOT REMOVE -->

Problem to solve

Be able to define a gradient as primary color.

<!-- generated by vuetify-issue-helper. DO NOT REMOVE -->

Gradients are only usable as background-image, theme colours need to be able to work as color and border-color too.

Environment

Vuetify Version: 2.2.26 Vue Version: 2.6.11 Browsers: Chrome 85.0.4183.83 OS: Windows 10, Windows

Steps to reproduce

1. Simple vuetify datatable
2. I want to pass index in edit and delete button

Expected Behavior

I want to pass index in edit and delete button

Actual Behavior

Not able to pass index

Reproduction Link

<a href="https://codepen.io/pistol/pen/PowZGmX" target="_blank">https://codepen.io/pistol/pen/PowZGmX</a>

<!-- generated by vuetify-issue-helper. DO NOT REMOVE -->

Duplicate of #11850

search-input is just the text displayed in the input, and that is changed when you select an item.

I added if (this.model && val === this.model.Description) return and it only calls the API once.

#9163

• Missing latest commit from docs-next
• Should replace the docs package, not add a new one
• missing crowdin rewrite in vercel.json
• src/pages/* used to be ignored, why was that changed?
• The shared package doesn't do anything? Shared dependencies should be in the root package.json and shared configs should also be in the root directory

Environment

Vuetify Version: 2.3.10 Vue Version: 2.6.12 Browsers: Chrome 84.0.4147.135 OS: Windows 7

Steps to reproduce

Click on the envelope.

Expected Behavior

@click should fire.

Actual Behavior

Nothing, because the listener is on a commented out button and not the svg.

Reproduction Link

<a href="https://codepen.io/teellcory/pen/mdPwvjj" target="_blank">https://codepen.io/teellcory/pen/mdPwvjj</a>

<!-- generated by vuetify-issue-helper. DO NOT REMOVE -->

Duplicate of #3505

Ah yeah I forgot that was already open, ty.

Environment

Vuetify Version: 2.3.10 Vue Version: 2.6.11 Browsers: Firefox 80.0 OS: Mac OS 10.14

Steps to reproduce

See the reproduction link.

Expected Behavior

Icons will not change their styling, regardless of the library or browser in use.

Actual Behavior

Icons change their styling.

Notes

Different versions of Firefox can be found here.

Reproduction Link

<a href="https://codesandbox.io/s/vuetify-2-fontawesome-5-firefox-and-the-clearable-icon-gntxg" target="_blank">https://codesandbox.io/s/vuetify-2-fontawesome-5-firefox-and-the-clearable-icon-gntxg</a>

<!-- generated by vuetify-issue-helper. DO NOT REMOVE -->

Duplicate of #10623

create a folder called sass, scss or styles in your src directory with a file named variables.scss or variables.sass

Environment

Vuetify Version: 2.3.10 Vue Version: 2.6.12 Browsers: Chrome 84.0.4147.125 OS: Linux

Steps to reproduce

Overriding component sass variable in a vuejs single-file component, following documentation instructions.

Expected Behavior

for the table rows to resize its height

Actual Behavior

data table rows are not affected

Reproduction Link

<a href="https://github.com/ElSamhaa/vuetify-datatable-reproduction.git" target="_blank">https://github.com/ElSamhaa/vuetify-datatable-reproduction.git</a>

<!-- generated by vuetify-issue-helper. DO NOT REMOVE -->

You can't just set variables anywhere and have it work, they need to be injected with sass-loader: https://vuetifyjs.com/en/customization/sass-variables/#vue-cli-install

Works for me in firefox 80 on linux.

fixes #12143

Markup:

<!-- Information on how to setup your local development environment can be found here: --> <!-- https://vuetifyjs.com/getting-started/contributing#setup-dev-environment -->

<!-- Paste markup for testing your change ---> <details>

<template>
  <v-container>
    <v-text-field clearable value="value" label="clearable"></v-text-field>
  </v-container>
</template>

</details>

Types of changes

<!-- What types of changes does your code introduce? Put an x in all the boxes that apply: -->

• [x] Bug fix (non-breaking change which fixes an issue)
• [ ] New feature (non-breaking change which adds functionality)
• [ ] Breaking change (fix or feature that would cause existing functionality to not work as expected)
• [ ] Improvement/refactoring (non-breaking change that doesn't add any features but makes things better)