Description

The problem I found on codebase is that whenever a v-tab is disabled the event propagation still happens on child elements because of pointer-events loses its inheritance.

Proper way I found to fix this was by adding the subsequent child elements to its list by overriding others pointer-events that could appear, e.g. v-badge

fixes #13728

Motivation and Context

The change itself helps fixing an UI behavior (#13728)

How Has This Been Tested?

Tested by using it on Chrome 94, Firefox 92 and Safari 15

Markup:

<template>
  <v-container>
    <v-tabs
      v-model="model"
      centered
      slider-color="yellow"
    >
      <v-tab
        v-for="i in 3"
        :key="i"
        :href="`#tab-${i}`"
      >
        Item {{ i }}
        <v-badge overlap>
          <template #badge>
            <v-icon>mdi-magnify</v-icon>
          </template>
          <v-icon>mdi-clipboard</v-icon>
        </v-badge>
      </v-tab>
    </v-tabs>
  </v-container>
</template>

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 features but makes 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 backwards compatible changes and next for non-backwards compatible 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)