Issues with BTooltip on Vue3 + @vue/compat
fifzteen opened this issue · comments
Describe the bug
Reproduction here:
https://stackblitz.com/edit/vitejs-vite-p8sht6
1. Reactivity in default slot doesn't work
in App.vue, value
is ref object v-model binded to b-form-input in tooltip (A) and out of tooltip (B).
- When inputs on (A), the value applies also on (B).
- When inputs on (B), (A) has no changes.
2. Styles defined on custom-class are not applied
<template>
<b-tooltip custom-class="custom-tip">...</b-tooltip>
</template>
<style scoped>
.custom-tip :deep(.tooltip-inner) {
background-color: #ffffff;
border: 1px solid #aaaaaa;
}
.custom-tip :deep(.arrow)::before {
border-top-color: #aaaaaa;
}
</style>
expected | works now |
---|---|
![]() |
![]() |
Probably, It's because data attribute of scopeId isn't correctly on wrapper div.
// OK
<div data-v-{hash:8}></div>
// NG (now)
<div data-v-app></div>
3. Wrapper div elements still exists even if tooltip hidden
Increases div
everytime tooltip shown
Steps to reproduce the bug
https://stackblitz.com/edit/vitejs-vite-p8sht6
Versions
Libraries:
- BootstrapVue: 2.23.1
- Bootstrap: 4.#.#
- Vue: 3.3.4
- @vue/compat: 3.3.4
Environment:
- Device: Mac
- OS: macOS Monterey
- Browser: Chrome
- Version: 113.0.5672.92