fix(MenuSubContent): content was overflow out of viewport (#645)

* fix: all subcontent should prioritzie position for smaller viewport * fix: position flip depends on the prioritzePosition prop * chore: lint
radix-vue · Jan 31, 2024 · ea6fb26 · ea6fb26
1 parent 912562a
commit ea6fb26
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 1 deletion.
diff --git a/packages/radix-vue/src/Menu/MenuSubContent.vue b/packages/radix-vue/src/Menu/MenuSubContent.vue
@@ -24,7 +24,9 @@ import { SUB_CLOSE_KEYS } from './utils'
 import { Presence } from '@/Presence'
 import { useForwardExpose, useForwardPropsEmits } from '@/shared'
 
-const props = defineProps<MenuSubContentProps>()
+const props = withDefaults(defineProps<MenuSubContentProps>(), {
+  prioritizePosition: true,
+})
 const emits = defineEmits<MenuSubContentEmits>()
 
 const forwarded = useForwardPropsEmits(props, emits)

diff --git a/packages/radix-vue/src/Popper/PopperContent.vue b/packages/radix-vue/src/Popper/PopperContent.vue
@@ -212,6 +212,11 @@ const computedMiddleware = computedEager(() => {
       mainAxis: props.sideOffset + arrowHeight.value,
       alignmentAxis: props.alignOffset,
     }),
+    props.prioritizePosition
+      && props.avoidCollisions
+      && flip({
+        ...detectOverflowOptions.value,
+      }),
     props.avoidCollisions
       && shift({
         mainAxis: true,