Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Bug Report][2.6.0] VDialog, error after change "fix(VDialog): don't re-focus autofocused children" #14581

Closed
mlankamp opened this issue Jan 8, 2022 · 3 comments · Fixed by #14584
Assignees
Labels
C: VDialog VDialog T: bug Functionality that does not work as intended/expected
Milestone

Comments

@mlankamp
Copy link

mlankamp commented Jan 8, 2022

Environment

Vuetify Version: 2.6.0
Last working version: 2.5.14
Vue Version: 2.6.14
Browsers: Edge 99.0.1128.0
OS: Windows 10

Steps to reproduce

  • Create Dialog, sometime I see an error in the console:
TypeError: Cannot read properties of undefined (reading 'contains')
    at VueComponent.<anonymous> (VDialog.ts:190:16)
    at Array.<anonymous> (vue.runtime.esm.js:1989:1)
    at flushCallbacks (vue.runtime.esm.js:1915:1)

Expected Behavior

Additional check if this.$refs.content is not undefined

Actual Behavior

Reproduction Link

https://codepen.io/

@mlankamp
Copy link
Author

I still have this issue, i've created a PR to fix this. How can I speed up the merge?

@KaelWD KaelWD added T: bug Functionality that does not work as intended/expected C: VDialog VDialog and removed S: triage labels Jun 29, 2022
@KaelWD KaelWD added this to the v2.6.x milestone Jun 29, 2022
@KaelWD KaelWD self-assigned this Jun 29, 2022
KaelWD added a commit that referenced this issue Jun 29, 2022
fixes #14581

Co-authored-by: Kael <kaelwd@gmail.com>
@jmarshall9120
Copy link

jmarshall9120 commented Dec 30, 2022

I get this same bug when trying to extend the dialog component

<template>
  <v-dialog v-bind="$props" v-on="$listeners">
    <template
      v-for="slot in Object.keys($scopedSlots)"
      :slot="slot"
      slot-scope="scope"
    >
      <slot :name="slot" v-bind="scope" />
    </template>
  </v-dialog>
</template>
<script>
import { VDialog } from 'vuetify/lib'
export default {
  name: 'DialogWHeader',
  extends: VDialog,
}
</script>
<style lang="scss"></style>

I'm on version: 2.6.13. I'm assuming the commit above is in this release.
Not sure how this works internally currently, running it down now. If anyone has some advice please feel welcome.

Update:

It looks like the this.$refs == {} at the time show() is called

    show() {
      !this.fullscreen && !this.hideOverlay && this.genOverlay(); // Double nextTick to wait for lazy content to be generated

      this.$nextTick(() => {
        this.$nextTick(() => {
          if (!this.$refs.content.contains(document.activeElement)) {
            this.previousActiveElement = document.activeElement;
            this.$refs.content.focus();
          }

          this.bind();
        });
      });
    },

Update 2

I've tracked it down a few hours now. It's something to do with the lazy content generation, not going off on the extended template.

@KaelWD
Copy link
Member

KaelWD commented Jan 1, 2023

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
C: VDialog VDialog T: bug Functionality that does not work as intended/expected
Projects
None yet
3 participants