mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-05-02 04:02:20 +00:00
fix: App mode - Widget dropdowns clipped in sidebar (#10338)
## Summary Popover components for graph mode are appendTo self so scale/translate works, however in the sidebar this causes them to be clipped by the parent overflow. This adds a provide/inject flag to change these to be appended to the body. ## Changes - **What**: - add append to injection for overriding where popovers are mounted - ensure dropdowns respect this flag - extract enterAppModeWithInputs helper - tests Before: <img width="225" height="140" alt="image" src="https://github.com/user-attachments/assets/bd83b0cd-49a9-45dd-8344-4c10221444fc" /> After: <img width="238" height="225" alt="image" src="https://github.com/user-attachments/assets/286e28e9-b37d-4ffc-91a9-7c340757d3fc" /> ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-10338-fix-App-mode-Widget-dropdowns-clipped-in-sidebar-3296d73d365081e2ba38e3e82006d65e) by [Unito](https://www.unito.io)
This commit is contained in:
@@ -1,5 +1,6 @@
|
||||
import type { HintedString } from '@primevue/core'
|
||||
import { computed } from 'vue'
|
||||
import type { InjectionKey } from 'vue'
|
||||
import { computed, inject } from 'vue'
|
||||
|
||||
/**
|
||||
* Options for configuring transform-compatible overlay props
|
||||
@@ -15,6 +16,10 @@ interface TransformCompatOverlayOptions {
|
||||
// autoZIndex?: boolean
|
||||
}
|
||||
|
||||
export const OverlayAppendToKey: InjectionKey<
|
||||
HintedString<'body' | 'self'> | undefined | HTMLElement
|
||||
> = Symbol('OverlayAppendTo')
|
||||
|
||||
/**
|
||||
* Composable that provides props to make PrimeVue overlay components
|
||||
* compatible with CSS-transformed parent elements.
|
||||
@@ -41,8 +46,10 @@ interface TransformCompatOverlayOptions {
|
||||
export function useTransformCompatOverlayProps(
|
||||
overrides: TransformCompatOverlayOptions = {}
|
||||
) {
|
||||
const injectedAppendTo = inject(OverlayAppendToKey, undefined)
|
||||
|
||||
return computed(() => ({
|
||||
appendTo: 'self' as const,
|
||||
appendTo: injectedAppendTo ?? ('self' as const),
|
||||
...overrides
|
||||
}))
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user