diff options
| author | Adam <[email protected]> | 2026-02-09 07:43:30 -0600 |
|---|---|---|
| committer | Adam <[email protected]> | 2026-02-09 07:43:36 -0600 |
| commit | 05355a6b5ccdff11d1059bbae742c632ac2dc2c3 (patch) | |
| tree | ca2a881776661fb73381af8ab5c5d9b76649e87c | |
| parent | 7ff51183cef2a6bf539a702afbc8474cd404176a (diff) | |
| download | opencode-05355a6b5ccdff11d1059bbae742c632ac2dc2c3.tar.gz opencode-05355a6b5ccdff11d1059bbae742c632ac2dc2c3.zip | |
fix(app): tooltip children focus loop
| -rw-r--r-- | packages/ui/src/components/tooltip.tsx | 24 |
1 files changed, 4 insertions, 20 deletions
diff --git a/packages/ui/src/components/tooltip.tsx b/packages/ui/src/components/tooltip.tsx index b55265b79..055e50465 100644 --- a/packages/ui/src/components/tooltip.tsx +++ b/packages/ui/src/components/tooltip.tsx @@ -1,5 +1,5 @@ import { Tooltip as KobalteTooltip } from "@kobalte/core/tooltip" -import { children, createSignal, Match, onMount, splitProps, Switch, type JSX } from "solid-js" +import { createSignal, Match, splitProps, Switch, type JSX } from "solid-js" import type { ComponentProps } from "solid-js" export interface TooltipProps extends ComponentProps<typeof KobalteTooltip> { @@ -40,32 +40,16 @@ export function Tooltip(props: TooltipProps) { "contentStyle", "inactive", "forceOpen", + "value", ]) - const c = children(() => local.children) - - onMount(() => { - const childElements = c() - if (childElements instanceof HTMLElement) { - childElements.addEventListener("focusin", () => setOpen(true)) - childElements.addEventListener("focusout", () => setOpen(false)) - } else if (Array.isArray(childElements)) { - for (const child of childElements) { - if (child instanceof HTMLElement) { - child.addEventListener("focusin", () => setOpen(true)) - child.addEventListener("focusout", () => setOpen(false)) - } - } - } - }) - return ( <Switch> <Match when={local.inactive}>{local.children}</Match> <Match when={true}> <KobalteTooltip gutter={4} {...others} open={local.forceOpen || open()} onOpenChange={setOpen}> <KobalteTooltip.Trigger as={"div"} data-component="tooltip-trigger" class={local.class}> - {c()} + {local.children} </KobalteTooltip.Trigger> <KobalteTooltip.Portal> <KobalteTooltip.Content @@ -75,7 +59,7 @@ export function Tooltip(props: TooltipProps) { class={local.contentClass} style={local.contentStyle} > - {others.value} + {local.value} {/* <KobalteTooltip.Arrow data-slot="tooltip-arrow" /> */} </KobalteTooltip.Content> </KobalteTooltip.Portal> |
