Skip to content

Commit

Permalink
fix: don't use nativeOn on native elements (#11228)
Browse files Browse the repository at this point in the history 
fixes #9999

* fix: don't use nativeOn on native elements

* fix(VList): don't use nativeOn when inactive

* fix(VListItem): don't use mergeData

setTextColor doesn't work when data.class is an array, and it's too much
work to fix that everywhere else

* test: update snapshots

Co-authored-by: John Leider <john@vuetifyjs.com>
  • Loading branch information
@KaelWD @johnleider
KaelWD and johnleider committed Jun 4, 2020
1 parent 0347df3 commit 6168845
Show file tree
Hide file tree
Showing 11 changed files with 91 additions and 42 deletions.
4 changes: 2 additions & 2 deletions package.json
View file
Expand Up @@ -54,9 +54,9 @@
"tslint": "^5.18.0",
"typescript": "^3.5.3",
"typestrict": "^1.0.2",
"vue": "^2.6.10",
"vue": "^2.6.11",
"vue-loader": "^15.7.1",
"vue-template-compiler": "^2.6.10",
"vue-template-compiler": "^2.6.11",
"webpack": "^4.39.1",
"webpack-cli": "^3.3.6",
"webpack-merge": "^4.2.1"
Expand Down
2 changes: 1 addition & 1 deletion packages/api-generator/package.json
View file
Expand Up @@ -14,7 +14,7 @@
"license": "ISC",
"dependencies": {
"deepmerge": "^4.0.0",
"vue": "^2.6.10",
"vue": "^2.6.11",
"vuetify": "^2.2.32"
},
"devDependencies": {
Expand Down
2 changes: 1 addition & 1 deletion packages/docs/package.json
View file
Expand Up @@ -41,7 +41,7 @@
"vue-i18n": "^8.12.0",
"vue-no-ssr": "^1.1.1",
"vue-router": "^3.0.7",
"vue-server-renderer": "^2.6.10",
"vue-server-renderer": "^2.6.11",
"vuelidate": "^0.7.4",
"vuetify": "^2.2.32",
"vuex": "^3.1.1",
Expand Down
2 changes: 1 addition & 1 deletion packages/vuetify/package.json
View file
Expand Up @@ -70,7 +70,7 @@
"@babel/preset-env": "^7.5.5",
"@mdi/font": "^4.5.95",
"@mdi/js": "^3.8.95",
"@types/jest": "^24.0.15",
"@types/jest": "^24.9.1",
"@types/node": "^12.6.8",
"@vue/test-utils": "^1.0.0-beta.29",
"autoprefixer": "^9.6.1",
Expand Down
2 changes: 1 addition & 1 deletion packages/vuetify/src/components/VCalendar/VCalendarDaily.ts
View file
Expand Up @@ -237,7 +237,7 @@ export default CalendarWithIntervals.extend({
render (h): VNode {
return h('div', {
class: this.classes,
nativeOn: {
on: {
dragstart: (e: MouseEvent) => {
e.preventDefault()
},
Expand Down
2 changes: 1 addition & 1 deletion packages/vuetify/src/components/VCalendar/VCalendarWeekly.ts
View file
Expand Up @@ -171,7 +171,7 @@ export default CalendarBase.extend({
return h('div', {
staticClass: this.staticClass,
class: this.classes,
nativeOn: {
on: {
dragstart: (e: MouseEvent) => {
e.preventDefault()
},
Expand Down
2 changes: 1 addition & 1 deletion packages/vuetify/src/components/VDataTable/VDataTableHeaderMobile.ts
View file
Expand Up @@ -35,7 +35,7 @@ export default mixins(header).extend({

return this.$createElement(VChip, {
staticClass: 'sortable',
nativeOn: {
on: {
click: (e: MouseEvent) => {
e.stopPropagation()
this.$emit('sort', props.item.value)
Expand Down
6 changes: 3 additions & 3 deletions ...s/vuetify/src/components/VDataTable/__tests__/__snapshots__/VDataTableHeader.spec.ts.snap
View file
Expand Up @@ -643,7 +643,7 @@ exports[`VDataTableHeader.ts mobile should work with multiSort 1`] = `
Sort by
</label>
<div class="v-select__selections">
<span class="sortable v-chip v-chip--no-color theme--light v-size--default">
<span class="sortable v-chip v-chip--clickable v-chip--no-color theme--light v-size--default">
<span class="v-chip__content">
Iron (%)
<div class="v-chip__close sortable active desc">
Expand Down Expand Up @@ -758,7 +758,7 @@ exports[`VDataTableHeader.ts mobile should work with sortBy correctly 1`] = `
Sort by
</label>
<div class="v-select__selections">
<span class="sortable v-chip v-chip--no-color theme--light v-size--default">
<span class="sortable v-chip v-chip--clickable v-chip--no-color theme--light v-size--default">
<span class="v-chip__content">
Iron (%)
<div class="v-chip__close sortable active desc">
Expand Down Expand Up @@ -823,7 +823,7 @@ exports[`VDataTableHeader.ts mobile should work with sortDesc correctly 1`] = `
Sort by
</label>
<div class="v-select__selections">
<span class="sortable v-chip v-chip--no-color theme--light v-size--default">
<span class="sortable v-chip v-chip--clickable v-chip--no-color theme--light v-size--default">
<span class="v-chip__content">
Iron (%)
<div class="v-chip__close sortable active asc">
Expand Down
2 changes: 1 addition & 1 deletion packages/vuetify/src/components/VDatePicker/VDatePickerHeader.ts
View file
Expand Up @@ -82,7 +82,7 @@ export default mixins(
icon: true,
light: this.light,
},
nativeOn: {
on: {
click: (e: Event) => {
e.stopPropagation()
this.$emit('input', this.calculateChange(change))
Expand Down
13 changes: 8 additions & 5 deletions packages/vuetify/src/components/VList/VListItem.ts
View file
Expand Up @@ -159,9 +159,8 @@ export default baseMixins.extend<options>().extend({
...data.attrs,
...this.genAttrs(),
}
data.on = {
...data.on,
click: this.click,
data[this.to ? 'nativeOn' : 'on'] = {
...data[this.to ? 'nativeOn' : 'on'],
keydown: (e: KeyboardEvent) => {
/* istanbul ignore else */
if (e.keyCode === keyCodes.enter) this.click(e)
Expand All @@ -170,15 +169,19 @@ export default baseMixins.extend<options>().extend({
},
}

if (this.inactive) tag = 'div'
if (this.inactive && this.to) {
data.on = data.nativeOn
delete data.nativeOn
}

const children = this.$scopedSlots.default
? this.$scopedSlots.default({
active: this.isActive,
toggle: this.toggle,
})
: this.$slots.default

tag = this.inactive ? 'div' : tag

return h(tag, this.setTextColor(this.color, data), children)
},
})
96 changes: 71 additions & 25 deletions yarn.lock
View file
Expand Up @@ -1026,6 +1026,15 @@
"@types/istanbul-reports" "^1.1.1"
"@types/yargs" "^12.0.9"

"@jest/types@^24.9.0":
version "24.9.0"
resolved "https://registry.yarnpkg.com/@jest/types/-/types-24.9.0.tgz#63cb26cb7500d069e5a389441a7c6ab5e909fc59"
integrity sha512-XKK7ze1apu5JWQ5eZjHITP66AX+QsLlbaJRBGYr8pNzwcAE2JVkwnf0yqjHTsDRcjR0mujy/NmZMXw5kl+kGBw==
dependencies:
"@types/istanbul-lib-coverage" "^2.0.0"
"@types/istanbul-reports" "^1.1.1"
"@types/yargs" "^13.0.0"

"@lerna/add@3.16.2":
version "3.16.2"
resolved "https://registry.yarnpkg.com/@lerna/add/-/add-3.16.2.tgz#90ecc1be7051cfcec75496ce122f656295bd6e94"
Expand Down Expand Up @@ -1871,17 +1880,12 @@
"@types/istanbul-lib-coverage" "*"
"@types/istanbul-lib-report" "*"

"@types/jest-diff@*":
version "20.0.1"
resolved "https://registry.yarnpkg.com/@types/jest-diff/-/jest-diff-20.0.1.tgz#35cc15b9c4f30a18ef21852e255fdb02f6d59b89"
integrity sha512-yALhelO3i0hqZwhjtcr6dYyaLoCHbAMshwtj6cGxTvHZAKXHsYGdff6E8EPw3xLKY0ELUTQ69Q1rQiJENnccMA==

"@types/jest@^24.0.15":
version "24.0.15"
resolved "https://registry.yarnpkg.com/@types/jest/-/jest-24.0.15.tgz#6c42d5af7fe3b44ffff7cc65de7bf741e8fa427f"
integrity sha512-MU1HIvWUme74stAoc3mgAi+aMlgKOudgEvQDIm1v4RkrDudBh1T+NFp5sftpBAdXdx1J0PbdpJ+M2EsSOi1djA==
"@types/jest@^24.9.1":
version "24.9.1"
resolved "https://registry.yarnpkg.com/@types/jest/-/jest-24.9.1.tgz#02baf9573c78f1b9974a5f36778b366aa77bd534"
integrity sha512-Fb38HkXSVA4L8fGKEZ6le5bB8r6MRWlOCZbVuWZcmOMSCd2wCYOwN1ibj8daIoV9naq7aaOZjrLCoCMptKU/4Q==
dependencies:
"@types/jest-diff" "*"
jest-diff "^24.3.0"

"@types/json-schema@^7.0.3":
version "7.0.3"
Expand Down Expand Up @@ -1935,11 +1939,23 @@
resolved "https://registry.yarnpkg.com/@types/stack-utils/-/stack-utils-1.0.1.tgz#0a851d3bd96498fa25c33ab7278ed3bd65f06c3e"
integrity sha512-l42BggppR6zLmpfU6fq9HEa2oGPEI8yrSPL3GITjfRInppYFahObbIQOQK3UGxEnyQpltZLaPe75046NOZQikw==

"@types/yargs-parser@*":
version "15.0.0"
resolved "https://registry.yarnpkg.com/@types/yargs-parser/-/yargs-parser-15.0.0.tgz#cb3f9f741869e20cce330ffbeb9271590483882d"
integrity sha512-FA/BWv8t8ZWJ+gEOnLLd8ygxH/2UFbAvgEonyfN6yWGLKc7zVjbpl2Y4CTjid9h2RfgPP6SEt6uHwEOply00yw==

"@types/yargs@^12.0.2", "@types/yargs@^12.0.9":
version "12.0.12"
resolved "https://registry.yarnpkg.com/@types/yargs/-/yargs-12.0.12.tgz#45dd1d0638e8c8f153e87d296907659296873916"
integrity sha512-SOhuU4wNBxhhTHxYaiG5NY4HBhDIDnJF60GU+2LqHAdKKer86//e4yg69aENCtQ04n0ovz+tq2YPME5t5yp4pw==

"@types/yargs@^13.0.0":
version "13.0.8"
resolved "https://registry.yarnpkg.com/@types/yargs/-/yargs-13.0.8.tgz#a38c22def2f1c2068f8971acb3ea734eb3c64a99"
integrity sha512-XAvHLwG7UQ+8M4caKIH0ZozIOYay5fQkAgyIXegXT9jPtdIGdhga+sUEdAr1CiG46aB+c64xQEYyEzlwWVTNzA==
dependencies:
"@types/yargs-parser" "*"

"@typescript-eslint/eslint-plugin@^1.13.0":
version "1.13.0"
resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-1.13.0.tgz#22fed9b16ddfeb402fd7bcde56307820f6ebc49f"
Expand Down Expand Up @@ -4793,6 +4809,11 @@ diff-sequences@^24.3.0:
resolved "https://registry.yarnpkg.com/diff-sequences/-/diff-sequences-24.3.0.tgz#0f20e8a1df1abddaf4d9c226680952e64118b975"
integrity sha512-xLqpez+Zj9GKSnPWS0WZw1igGocZ+uua8+y+5dDNTT934N3QuY1sp2LkHzwiaYQGz60hMq0pjAshdeXm5VUOEw==

diff-sequences@^24.9.0:
version "24.9.0"
resolved "https://registry.yarnpkg.com/diff-sequences/-/diff-sequences-24.9.0.tgz#5715d6244e2aa65f48bba0bc972db0b0b11e95b5"
integrity sha512-Dj6Wk3tWyTE+Fo1rW8v0Xhwk80um6yFYKbuAxc9c3EZxIHFDYwbi34Uk42u1CdnIiVorvt4RmlSDjIPyzGC2ew==

diff@^3.2.0:
version "3.5.0"
resolved "https://registry.yarnpkg.com/diff/-/diff-3.5.0.tgz#800c0dd1e0a8bfbc95835c202ad220fe317e5a12"
Expand Down Expand Up @@ -7606,6 +7627,16 @@ jest-css-modules@^2.1.0:
dependencies:
identity-obj-proxy "3.0.0"

jest-diff@^24.3.0:
version "24.9.0"
resolved "https://registry.yarnpkg.com/jest-diff/-/jest-diff-24.9.0.tgz#931b7d0d5778a1baf7452cb816e325e3724055da"
integrity sha512-qMfrTs8AdJE2iqrTp0hzh7kTd2PQWrsFyj9tORoKmu32xjPjeE4NyjVRDz8ybYwqS2ik8N4hsIpiVTyFeo2lBQ==
dependencies:
chalk "^2.0.1"
diff-sequences "^24.9.0"
jest-get-type "^24.9.0"
pretty-format "^24.9.0"

jest-diff@^24.8.0:
version "24.8.0"
resolved "https://registry.yarnpkg.com/jest-diff/-/jest-diff-24.8.0.tgz#146435e7d1e3ffdf293d53ff97e193f1d1546172"
Expand Down Expand Up @@ -7671,6 +7702,11 @@ jest-get-type@^24.8.0:
resolved "https://registry.yarnpkg.com/jest-get-type/-/jest-get-type-24.8.0.tgz#a7440de30b651f5a70ea3ed7ff073a32dfe646fc"
integrity sha512-RR4fo8jEmMD9zSz2nLbs2j0zvPpk/KCEz3a62jJWbd2ayNo0cb+KFRxPHVhE4ZmgGJEQp0fosmNz84IfqM8cMQ==

jest-get-type@^24.9.0:
version "24.9.0"
resolved "https://registry.yarnpkg.com/jest-get-type/-/jest-get-type-24.9.0.tgz#1684a0c8a50f2e4901b6644ae861f579eed2ef0e"
integrity sha512-lUseMzAley4LhIcpSP9Jf+fTrQ4a1yHQwLNeeVa2cEmbCGeoZAtYPOIv8JaxLD/sUpKxetKGP+gsHl8f8TSj8Q==

jest-haste-map@^24.8.0:
version "24.8.0"
resolved "https://registry.yarnpkg.com/jest-haste-map/-/jest-haste-map-24.8.0.tgz#51794182d877b3ddfd6e6d23920e3fe72f305800"
Expand Down Expand Up @@ -10506,6 +10542,16 @@ pretty-format@^24.8.0:
ansi-styles "^3.2.0"
react-is "^16.8.4"

pretty-format@^24.9.0:
version "24.9.0"
resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-24.9.0.tgz#12fac31b37019a4eea3c11aa9a959eb7628aa7c9"
integrity sha512-00ZMZUiHaJrNfk33guavqgvfJS30sLYf0f8+Srklv0AMPodGGHcoHgksZ3OThYnIvOd+8yMCn0YiEOogjlgsnA==
dependencies:
"@jest/types" "^24.9.0"
ansi-regex "^4.0.0"
ansi-styles "^3.2.0"
react-is "^16.8.4"

prismjs@^1.17.1:
version "1.17.1"
resolved "https://registry.yarnpkg.com/prismjs/-/prismjs-1.17.1.tgz#e669fcbd4cdd873c35102881c33b14d0d68519be"
Expand Down Expand Up @@ -11708,7 +11754,7 @@ serialize-error@^2.1.0:
resolved "https://registry.yarnpkg.com/serialize-error/-/serialize-error-2.1.0.tgz#50b679d5635cdf84667bdc8e59af4e5b81d5f60a"
integrity sha1-ULZ51WNc34Rme9yOWa9OW4HV9go=

serialize-javascript@^1.3.0, serialize-javascript@^1.7.0:
serialize-javascript@^1.7.0:
version "1.7.0"
resolved "https://registry.yarnpkg.com/serialize-javascript/-/serialize-javascript-1.7.0.tgz#d6e0dfb2a3832a8c94468e6eb1db97e55a192a65"
integrity sha512-ke8UG8ulpFOxO8f8gRYabHQe/ZntKlcig2Mp+8+URDP1D8vJZ0KUt7LYo07q25Z/+JVSgpr/cui9PIp5H6/+nA==
Expand Down Expand Up @@ -13459,18 +13505,18 @@ vue-router@^3.0.7:
resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-3.0.7.tgz#b36ca107b4acb8ff5bc4ff824584059c23fcb87b"
integrity sha512-utJ+QR3YlIC/6x6xq17UMXeAfxEvXA0VKD3PiSio7hBOZNusA1jXcbxZxVEfJunLp48oonjTepY8ORoIlRx/EQ==

vue-server-renderer@^2.6.10:
version "2.6.10"
resolved "https://registry.yarnpkg.com/vue-server-renderer/-/vue-server-renderer-2.6.10.tgz#cb2558842ead360ae2ec1f3719b75564a805b375"
integrity sha512-UYoCEutBpKzL2fKCwx8zlRtRtwxbPZXKTqbl2iIF4yRZUNO/ovrHyDAJDljft0kd+K0tZhN53XRHkgvCZoIhug==
vue-server-renderer@^2.6.11:
version "2.6.11"
resolved "https://registry.yarnpkg.com/vue-server-renderer/-/vue-server-renderer-2.6.11.tgz#be8c9abc6aacc309828a755c021a05fc474b4bc3"
integrity sha512-V3faFJHr2KYfdSIalL+JjinZSHYUhlrvJ9pzCIjjwSh77+pkrsXpK4PucdPcng57+N77pd1LrKqwbqjQdktU1A==
dependencies:
chalk "^1.1.3"
hash-sum "^1.0.2"
he "^1.1.0"
lodash.template "^4.4.0"
lodash.template "^4.5.0"
lodash.uniq "^4.5.0"
resolve "^1.2.0"
serialize-javascript "^1.3.0"
serialize-javascript "^2.1.2"
source-map "0.5.6"

vue-style-loader@^4.1.0, vue-style-loader@^4.1.2:
Expand All @@ -13481,10 +13527,10 @@ vue-style-loader@^4.1.0, vue-style-loader@^4.1.2:
hash-sum "^1.0.2"
loader-utils "^1.0.2"

vue-template-compiler@^2.6.10:
version "2.6.10"
resolved "https://registry.yarnpkg.com/vue-template-compiler/-/vue-template-compiler-2.6.10.tgz#323b4f3495f04faa3503337a82f5d6507799c9cc"
integrity sha512-jVZkw4/I/HT5ZMvRnhv78okGusqe0+qH2A0Em0Cp8aq78+NK9TII263CDVz2QXZsIT+yyV/gZc/j/vlwa+Epyg==
vue-template-compiler@^2.6.11:
version "2.6.11"
resolved "https://registry.yarnpkg.com/vue-template-compiler/-/vue-template-compiler-2.6.11.tgz#c04704ef8f498b153130018993e56309d4698080"
integrity sha512-KIq15bvQDrcCjpGjrAhx4mUlyyHfdmTaoNfeoATHLAiWB+MU3cx4lOzMwrnUh9cCxy0Lt1T11hAFY6TQgroUAA==
dependencies:
de-indent "^1.0.2"
he "^1.1.0"
Expand All @@ -13494,10 +13540,10 @@ vue-template-es2015-compiler@^1.9.0:
resolved "https://registry.yarnpkg.com/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.9.1.tgz#1ee3bc9a16ecbf5118be334bb15f9c46f82f5825"
integrity sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==

vue@^2.6.10:
version "2.6.10"
resolved "https://registry.yarnpkg.com/vue/-/vue-2.6.10.tgz#a72b1a42a4d82a721ea438d1b6bf55e66195c637"
integrity sha512-ImThpeNU9HbdZL3utgMCq0oiMzAkt1mcgy3/E6zWC/G6AaQoeuFdsl9nDhTDU3X1R6FK7nsIUuRACVcjI+A2GQ==
vue@^2.6.11:
version "2.6.11"
resolved "https://registry.yarnpkg.com/vue/-/vue-2.6.11.tgz#76594d877d4b12234406e84e35275c6d514125c5"
integrity sha512-VfPwgcGABbGAue9+sfrD4PuwFar7gPb1yl1UK1MwXoQPAw0BKSqWfoYCT/ThFrdEVWoI51dBuyCoiNU9bZDZxQ==

vuelidate@^0.7.4:
version "0.7.4"
Expand Down

0 comments on commit 6168845

Please sign in to comment.