TriliumNext/Trilium
1
0
Fork 0
mirror of https://github.com/TriliumNext/Trilium.git synced 2025-12-10 21:07:05 -06:00
Code Issues 1.1k Packages Projects Releases 10 Wiki Activity

fix(launch_bar): dropdown tooltip visible when hovering popup

Browse Source
This commit is contained in:
Elian Doran 2025-12-05 15:06:55 +02:00
parent 9149fb7a85
commit ec99242314
No known key found for this signature in database
1 changed files with 7 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
apps/client/src/widgets/react/Dropdown.tsx
View File

@ -2,7 +2,7 @@ import { Dropdown as BootstrapDropdown, Tooltip } from "bootstrap";
import { ComponentChildren, HTMLAttributes } from "preact"; import { ComponentChildren, HTMLAttributes } from "preact";
import { CSSProperties, HTMLProps } from "preact/compat"; import { CSSProperties, HTMLProps } from "preact/compat";
import { MutableRef, useCallback, useEffect, useRef, useState } from "preact/hooks"; import { MutableRef, useCallback, useEffect, useRef, useState } from "preact/hooks";
import { useStaticTooltip, useUniqueName } from "./hooks"; import { useTooltip, useUniqueName } from "./hooks";
type DataAttributes = { type DataAttributes = {
[key: `data-${string}`]: string | number | boolean | undefined; [key: `data-${string}`]: string | number | boolean | undefined;
@ -35,10 +35,11 @@ export interface DropdownProps extends Pick<HTMLProps<HTMLDivElement>, "id" | "c
export default function Dropdown({ id, className, buttonClassName, isStatic, children, title, text, dropdownContainerStyle, dropdownContainerClassName, hideToggleArrow, iconAction, disabled, noSelectButtonStyle, noDropdownListStyle, forceShown, onShown: externalOnShown, onHidden: externalOnHidden, dropdownOptions, buttonProps, dropdownRef, titlePosition, titleOptions }: DropdownProps) { export default function Dropdown({ id, className, buttonClassName, isStatic, children, title, text, dropdownContainerStyle, dropdownContainerClassName, hideToggleArrow, iconAction, disabled, noSelectButtonStyle, noDropdownListStyle, forceShown, onShown: externalOnShown, onHidden: externalOnHidden, dropdownOptions, buttonProps, dropdownRef, titlePosition, titleOptions }: DropdownProps) {
const containerRef = useRef<HTMLDivElement | null>(null); const containerRef = useRef<HTMLDivElement | null>(null);
const triggerRef = useRef<HTMLButtonElement | null>(null); const triggerRef = useRef<HTMLButtonElement | null>(null);
useStaticTooltip(containerRef, { const { showTooltip, hideTooltip } = useTooltip(containerRef, {
...titleOptions, ...titleOptions,
placement: titlePosition ?? "bottom", placement: titlePosition ?? "bottom",
fallbackPlacements: [ titlePosition ?? "bottom" ], fallbackPlacements: [ titlePosition ?? "bottom" ],
trigger: "manual"
}); });
const [ shown, setShown ] = useState(false); const [ shown, setShown ] = useState(false);
@ -60,7 +61,8 @@ export default function Dropdown({ id, className, buttonClassName, isStatic, chi
const onShown = useCallback(() => { const onShown = useCallback(() => {
setShown(true); setShown(true);
externalOnShown?.(); externalOnShown?.();
}, []) hideTooltip();
}, [ hideTooltip ])
const onHidden = useCallback(() => { const onHidden = useCallback(() => {
setShown(false); setShown(false);
@ -95,6 +97,8 @@ export default function Dropdown({ id, className, buttonClassName, isStatic, chi
aria-expanded="false" aria-expanded="false"
id={id ?? ariaId} id={id ?? ariaId}
disabled={disabled} disabled={disabled}
onMouseOver={() => showTooltip()}
onMouseLeave={() => hideTooltip()}
{...buttonProps} {...buttonProps}
> >
{text} {text}