feat: backdrop element to improve autohide on mobile

Akryum · Feb 1, 2022 · 803dcca · 803dcca
1 parent 25e14b2
commit 803dcca
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 5 deletions.
diff --git a/packages/docs/src/.vuepress/components/DropdownMobileDemo.vue b/packages/docs/src/.vuepress/components/DropdownMobileDemo.vue
@@ -51,7 +51,7 @@ export default {
 
  <div v-if="isMobile">
  <button
- class="bg-gray-300 rounded px-4 py-2"
+ class="bg-gray-300 rounded px-4 py-2 w-full"
  @click="hide()"
  >
  Cancel
@@ -75,17 +75,20 @@ body.no-scroll {
  left: 0;
  width: 100%;
  height: 100%;
- background: rgba(0 0 0 / 90%);
- pointer-events: none;
  display: flex;
  align-items: flex-end;
- padding: 12px;
+}
+
+.v-popper__popper--no-positioning .v-popper__backdrop {
+ display: block;
+ background: rgba(0 0 0 / 90%);
 }
 
 .v-popper__popper--no-positioning .v-popper__wrapper {
  width: 100%;
  pointer-events: auto;
  transition: transform .15s ease-out;
+ padding: 12px;
 }
 
 .v-popper__popper--no-positioning.v-popper__popper--hidden .v-popper__wrapper {

diff --git a/packages/floating-vue/src/components/PopperContent.vue b/packages/floating-vue/src/components/PopperContent.vue
@@ -27,6 +27,10 @@
  :data-popper-placement="result ? result.placement : undefined"
  @keyup.esc="autoHide && $emit('hide')"
  >
+ <div
+ class="v-popper__backdrop"
+ @click="autoHide && $emit('hide')"
+ />
  <div
  class="v-popper__wrapper"
  :style="result ? {
@@ -113,6 +117,7 @@ export default {
  visibility: hidden;
  opacity: 0;
  transition: opacity .15s, visibility .15s;
+ pointer-events: none;
 }
 
 .v-popper__popper.v-popper__popper--shown {
@@ -126,6 +131,15 @@ export default {
  transition: none !important;
 }
 
+.v-popper__backdrop {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ display: none;
+}
+
 .v-popper__inner {
  position: relative;
  box-sizing: border-box;
@@ -250,5 +264,4 @@ export default {
 .v-popper__popper[data-popper-placement^="left"] .v-popper__arrow-inner {
  left: -2px;
 }
-
 </style>