fix(VDialog/VMenu): enable pointer-events for disabled activator

[jacekkarczmarczyk]

Description

Don't render contents and remove pointer-events: none for disabled menu/dialog

Motivation and Context

fixes #5472

How Has This Been Tested?

visuall, updated unit

Markup:

<template>
  <v-app>
    <v-content>
      <v-checkbox label="Disabled" v-model="disabled"></v-checkbox>
      <v-menu :disabled="disabled">
        <v-btn slot="activator">Menu</v-btn>
        <v-card><v-card-text>I'm menu</v-card-text></v-card>
      </v-menu>
      <v-menu :disabled="disabled" open-on-hover>
        <v-btn slot="activator">Menu (hover)</v-btn>
        <v-card><v-card-text>I'm menu</v-card-text></v-card>
      </v-menu>
      <v-btn id="external-disabled">External activator</v-btn>
      <v-menu :activator="activators['external-disabled']" :disabled="disabled">
        <v-card><v-card-text>I'm menu</v-card-text></v-card>
      </v-menu>
      <v-btn id="external-disabled-hover">External activator (hover)</v-btn>
      <v-menu open-on-hover :activator="activators['external-disabled-hover']" :disabled="disabled">
        <v-card><v-card-text>I'm menu</v-card-text></v-card>
      </v-menu>
      <v-dialog :disabled="disabled">
        <v-btn slot="activator">Dialog</v-btn>
        <v-card><v-card-text>I'm dialog</v-card-text></v-card>
      </v-dialog>
      <v-bottom-sheet :disabled="disabled">
        <v-btn slot="activator">Bottom sheet</v-btn>
        <v-card><v-card-text>I'm bottom sheet</v-card-text></v-card>
      </v-bottom-sheet>
      <v-subheader>Active</v-subheader>
      <v-menu>
        <v-btn slot="activator">Menu</v-btn>
        <v-card><v-card-text>I'm menu</v-card-text></v-card>
      </v-menu>
      <v-menu open-on-hover>
        <v-btn slot="activator">Menu (hover)</v-btn>
        <v-card><v-card-text>I'm menu</v-card-text></v-card>
      </v-menu>
      <v-btn id="external-enabled">External activator</v-btn>
      <v-menu :activator="activators['external-enabled']">
        <v-card><v-card-text>I'm menu</v-card-text></v-card>
      </v-menu>
      <v-btn id="external-enabled-hover">External activator (hover)</v-btn>
      <v-menu open-on-hover :activator="activators['external-enabled-hover']">
        <v-card><v-card-text>I'm menu</v-card-text></v-card>
      </v-menu>
      <v-dialog>
        <v-btn slot="activator">Dialog</v-btn>
        <v-card><v-card-text>I'm dialog</v-card-text></v-card>
      </v-dialog>
      <v-bottom-sheet>
        <v-btn slot="activator">Bottom sheet</v-btn>
        <v-card><v-card-text>I'm bottom sheet</v-card-text></v-card>
      </v-bottom-sheet>
    </v-content>
  </v-app>
</template>

<script>
export default {
  data: () => ({
    activators: {},
    disabled: true
  }),
  mounted () {
    ['external-disabled', 'external-disabled-hover', 'external-enabled', 'external-enabled-hover'].forEach(id => {
      this.$set(this.activators, id, document.getElementById(id))
    })
  }
}
</script>

Types of changes

• 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 feature but make things better)

Checklist:

• The PR title is no longer than 64 characters.
• The PR is submitted to the correct branch (master for bug fixes and documentation updates, dev for new features and breaking changes).
• My code follows the code style of this project.
• I've added relevant changes to the documentation (applies to new features and breaking changes in core library)

[codecov]

Codecov Report

Merging #5511 into dev will decrease coverage by 0.05%.
The diff coverage is 50%.

@@            Coverage Diff             @@
##              dev    #5511      +/-   ##
==========================================
- Coverage   88.58%   88.53%   -0.06%     
==========================================
  Files         281      281              
  Lines        6169     6173       +4     
  Branches     1534     1535       +1     
==========================================
  Hits         5465     5465              
- Misses        587      589       +2     
- Partials      117      119       +2

Impacted Files	Coverage Δ
packages/vuetify/src/components/VMenu/VMenu.js	83.63% <0%> (-6.56%)	⬇️
packages/vuetify/src/components/VDialog/VDialog.js	72.72% <100%> (ø)	⬆️
...tify/src/components/VMenu/mixins/menu-activator.js	46.15% <100%> (-2%)	⬇️
...ify/src/components/VMenu/mixins/menu-generators.js	84.61% <66.66%> (+0.61%)	⬆️

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 386d89f...e19fa91. Read the comment docs.

[johnleider]

I wonder if this type of logic should be in bootable so we don't have to duplicate the logic.

[johnleider]

Could this be handled in genContent similar to what genActivator does?

[KaelWD]

This will cause different layout behaviour depending on if the dialog is disabled or not. Didn't we say to just ignore the click event? It doesn't need a rewrite of the entire render function.

[johnleider]

Please create unit tests that correlate to the changes made in this request.

mistake

[jacekkarczmarczyk]

Update: added tests and external activator support, updated Playground.vue. The button for menu with external activator and open-on-hover prop doesn't work though because of #5860

[lock]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs. Please direct any non-bug questions to our Discord