fix: tooltip competing with popover trigger on Windows

Add disabled prop to Tip — forces tooltip closed when the parent popover
is open. Fixes the settings gear and variable-bind popovers not opening
on Windows WebView2 due to TooltipTrigger intercepting pointer events.

Closes #171
Co-authored-by: Anton Soldatov <sld0Ant@users.noreply.github.com>
This commit is contained in:
Danila Poyarkov 2026-04-15 13:45:35 +03:00
parent 837c09bd78
commit 728274f4a7
3 changed files with 10 additions and 5 deletions

View file

@ -19,6 +19,7 @@ import { useAIChat } from '@/composables/use-chat'
import { openExternalLink } from '@/utils/external-link'
const cls = usePopoverUI({ content: 'isolate z-[51] w-64 p-3' })
const popoverOpen = ref(false)
const {
providerID,
@ -95,8 +96,8 @@ function clearUnsplashKey() {
</script>
<template>
<PopoverRoot>
<Tip label="Provider settings">
<PopoverRoot @update:open="popoverOpen = $event">
<Tip label="Provider settings" :disabled="popoverOpen">
<PopoverTrigger
data-test-id="provider-settings-trigger"
class="rounded p-0.5 text-muted hover:bg-hover hover:text-surface"

View file

@ -15,6 +15,7 @@ import ScrubInput from '@/components/ScrubInput.vue'
import Tip from '@/components/ui/Tip.vue'
import { useIconButtonUI } from '@/components/ui/icon-button'
import { ref } from 'vue'
import { colorToCSS } from '@open-pencil/core'
import { useI18n } from '@open-pencil/vue'
@ -48,6 +49,7 @@ const emit = defineEmits<{
}>()
const { panels, dialogs } = useI18n()
const varPopoverOpen = ref(false)
</script>
<template>
@ -71,8 +73,9 @@ const { panels, dialogs } = useI18n()
bindingApi.colorVariables.value.length > 0 &&
!bindingApi.getBoundVariable(activeNodeId, index)
"
@update:open="varPopoverOpen = $event"
>
<Tip :label="panels.applyVariable">
<Tip :label="panels.applyVariable" :disabled="varPopoverOpen">
<PopoverTrigger
class="shrink-0 cursor-pointer border-none bg-transparent p-0 text-muted hover:text-surface"
>

View file

@ -5,14 +5,15 @@ import { useTooltipUI } from '@/components/ui/tooltip'
const cls = useTooltipUI({ content: 'animate-in zoom-in-95 fade-in' })
const { side = 'top' } = defineProps<{
const { side = 'top', disabled = false } = defineProps<{
label: string
side?: 'top' | 'bottom' | 'left' | 'right'
disabled?: boolean
}>()
</script>
<template>
<TooltipRoot>
<TooltipRoot :open="disabled ? false : undefined">
<TooltipTrigger as-child>
<slot />
</TooltipTrigger>