feat(Toolip): added ignore non-keyboard focus prop (unovue#775)

* feat: added keyboard-focus-only prop to Tooltip

* fix: correct language in docs

* fix: provide a clear name for the prop

packages/radix-vue/src/Tooltip/TooltipProvider.vue

@@ -10,6 +10,7 @@ interface TooltipProviderContext {
   isPointerInTransitRef: Ref<boolean>
   disableHoverableContent: Ref<boolean>
   disableClosingTrigger: Ref<boolean>
+  ignoreNonKeyboardFocus: Ref<boolean>
 }
 
 export const [injectTooltipProviderContext, provideTooltipProviderContext]
@@ -36,6 +37,14 @@ export interface TooltipProviderProps {
    * @defaultValue false
    */
   disableClosingTrigger?: boolean
+  /**
+   * Prevent the tooltip from opening if the focus did not come from
+   * the keyboard by matching against the `:focus-visible` selector.
+   * This is useful if you want to avoid opening it when switching
+   * browser tabs or closing a dialog.
+   * @defaultValue false
+   */
+  ignoreNonKeyboardFocus?: boolean
 }
 </script>
 
@@ -47,8 +56,9 @@ const props = withDefaults(defineProps<TooltipProviderProps>(), {
   delayDuration: 700,
   skipDelayDuration: 300,
   disableHoverableContent: false,
+  ignoreNonKeyboardFocus: false,
 })
-const { delayDuration, skipDelayDuration, disableHoverableContent, disableClosingTrigger } = toRefs(props)
+const { delayDuration, skipDelayDuration, disableHoverableContent, disableClosingTrigger, ignoreNonKeyboardFocus } = toRefs(props)
 useForwardExpose()
 
 const isOpenDelayed = ref(true)
@@ -72,6 +82,7 @@ provideTooltipProviderContext({
   isPointerInTransitRef,
   disableHoverableContent,
   disableClosingTrigger,
+  ignoreNonKeyboardFocus,
 })
 </script>
 

packages/radix-vue/src/Tooltip/TooltipRoot.vue

@@ -30,6 +30,14 @@ export interface TooltipRootProps {
    * @defaultValue false
    */
   disableClosingTrigger?: boolean
+  /**
+   * Prevent the tooltip from opening if the focus did not come from
+   * the keyboard by matching against the `:focus-visible` selector.
+   * This is useful if you want to avoid opening it when switching
+   * browser tabs or closing a dialog.
+   * @defaultValue false
+   */
+  ignoreNonKeyboardFocus?: boolean
 }
 
 export type TooltipRootEmits = {
@@ -49,6 +57,7 @@ export interface TooltipContext {
   onClose(): void
   disableHoverableContent: Ref<boolean>
   disableClosingTrigger: Ref<boolean>
+  ignoreNonKeyboardFocus: Ref<boolean>
 }
 
 export const [injectTooltipRootContext, provideTooltipRootContext]
@@ -68,6 +77,7 @@ const props = withDefaults(defineProps<TooltipRootProps>(), {
   delayDuration: undefined,
   disableHoverableContent: undefined,
   disableClosingTrigger: undefined,
+  ignoreNonKeyboardFocus: undefined,
 })
 
 const emit = defineEmits<TooltipRootEmits>()
@@ -78,6 +88,7 @@ const providerContext = injectTooltipProviderContext()
 const disableHoverableContent = computed(() => props.disableHoverableContent ?? providerContext.disableHoverableContent.value)
 const disableClosingTrigger = computed(() => props.disableClosingTrigger ?? providerContext.disableClosingTrigger.value)
 const delayDuration = computed(() => props.delayDuration ?? providerContext.delayDuration.value)
+const ignoreNonKeyboardFocus = computed(() => props.ignoreNonKeyboardFocus ?? providerContext.ignoreNonKeyboardFocus.value)
 
 const open = useVModel(props, 'open', emit, {
   defaultValue: props.defaultOpen,
@@ -149,6 +160,7 @@ provideTooltipRootContext({
   onClose: handleClose,
   disableHoverableContent,
   disableClosingTrigger,
+  ignoreNonKeyboardFocus,
 })
 </script>
 

packages/radix-vue/src/Tooltip/TooltipTrigger.vue

@@ -70,8 +70,14 @@ onMounted(() => {
         hasPointerMoveOpened = false;
       }"
       @pointerdown="handlePointerDown"
-      @focus="() => {
-        if (!isPointerDown) rootContext.onOpen()
+      @focus="(event) => {
+        if (isPointerDown)
+          return
+
+        if (rootContext.ignoreNonKeyboardFocus.value && !(event.target as HTMLElement).matches?.(':focus-visible'))
+          return
+
+        rootContext.onOpen()
       }"
       @blur="rootContext.onClose()"
       @click="() => {