fix(dropdown): fix dropdown popup when inside modal

Author: adenvt

src/components/dropdown/Dropdown.vue

@@ -33,7 +33,7 @@
 
     <Transition name="fade">
       <div
-        v-show="isOpen"
+        v-show="isOpen && !isHidden"
         ref="menu"
         data-testid="dropdown-menu"
         class="dropdown__menu"
@@ -57,6 +57,7 @@ import {
   toRef,
   watchEffect,
   computed,
+  ref,
 } from 'vue-demi'
 import {
   templateRef,
@@ -73,6 +74,7 @@ import {
   offset,
   flip,
   shift,
+  hide,
 } from '@floating-ui/dom'
 import { useVModel } from '../input'
 import IconArrow from '@carbon/icons-vue/lib/chevron--down/16'
@@ -175,6 +177,7 @@ export default defineComponent({
     const wizard    = templateRef<DropdownSubitemElement>('wizard')
     const placement = toRef(props, 'placement')
     const isOpen    = useVModel(props)
+    const isHidden  = ref(false)
 
     const { next: nextFocus, prev: prevFocus } = useFocus(menu)
 
@@ -280,13 +283,16 @@ export default defineComponent({
               flip(),
               shift(),
               offset(8),
+              hide(),
             ],
-          }).then(({ x, y, placement }) => {
+          }).then(({ x, y, placement, middlewareData }) => {
             if (menu.value) {
               menu.value.dataset.popperPlacement = placement
 
               menu.value.style.left = `${x || 0}px`
               menu.value.style.top  = `${y || 0}px`
+
+              isHidden.value = middlewareData.hide.referenceHidden
             }
           })
         })
@@ -309,6 +315,7 @@ export default defineComponent({
 
     return {
       isOpen,
+      isHidden,
       classNames,
       containerSize,
       toggle,
@@ -327,7 +334,7 @@ export default defineComponent({
   --p-dropdown-size-sm: 15rem; /* 240px */
   --p-dropdown-max-height: theme(spacing.64);
 
-  @apply relative inline-flex;
+  @apply inline-flex;
 
   &__menu {
     @apply max-h-[var(--p-dropdown-max-height)] border rounded bg-default z-[var(--p-dropdown-z-index)] border-default shadow-xl overflow-x-hidden overflow-y-auto absolute;

src/components/modal/index.md

@@ -10,6 +10,8 @@ description: ase component for modal dialog.
   import pHeading from '../heading/Heading.vue'
   import pBanner from '../banner/Banner.vue'
   import pCheckbox from '../checkbox/Checkbox.vue'
+  import pFormGroup from '../form-group/FormGroup.vue'
+  import pDatepicker from '../datepicker/Datepicker.vue'
 
   const basicModal  = ref(true)
   const showModal   = ref(false)
@@ -370,6 +372,9 @@ When modals content become too long, modal body can scroll itself by adding prop
       <p>
         I am alone, and feel the charm of existence in this spot, which was created for the bliss of souls like mine. I am so happy, my dear friend, so absorbed in the exquisite sense of mere tranquil existence, that I neglect my talents.
       </p>
+      <p-form-group label="Select Date">
+        <p-datepicker />
+      </p-form-group>
     </div>
     <template #footer="{ close }">
       <p-button @click="close" color="info">

src/components/select/Select.vue

@@ -7,16 +7,19 @@
     :disabled="disabled"
     :class="classNames">
     <template #activator>
-      <Input
+      <p-input
         v-model="search"
         data-testid="select-search"
         class="select__search"
         :size="size"
         :placeholder="placeholder"
         :disabled="disabled"
         :readonly="readonly"
-        @focus="onFocus" />
-      <IconArrow class="select__caret" />
+        @focus="onFocus">
+        <template #append>
+          <IconArrow class="select__caret" />
+        </template>
+      </p-input>
     </template>
 
     <template v-if="!isLoading && items.length === 0">
@@ -69,7 +72,7 @@
 <script lang="ts">
 import Dropdown from '../dropdown/Dropdown.vue'
 import DropdownItem from '../dropdown/DropdownItem.vue'
-import Input from '../input/Input.vue'
+import pInput from '../input/Input.vue'
 import IconArrow from '@carbon/icons-vue/lib/chevron--down/16'
 import IconCheck from '@carbon/icons-vue/lib/checkmark--filled/16'
 import IconLoading from '../spinner/SpinnerRing.vue'
@@ -94,7 +97,7 @@ export default defineComponent({
   components: {
     Dropdown,
     DropdownItem,
-    Input,
+    pInput,
     IconArrow,
     IconCheck,
     IconLoading,
@@ -288,7 +291,7 @@ export default defineComponent({
   }
 
   &__caret {
-    @apply absolute right-3 top-0 bottom-0 my-auto transition-transform duration-150 text-subtle pointer-events-none;
+    @apply transition-transform duration-150 text-subtle pointer-events-none;
     @apply dark:text-dark-subtle;
   }