gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-12-27 17:54:23 +01:00
Code Issues Actions 10 Packages Projects Releases Wiki Activity

fix(dropdown): clicking in the outer area of a menu dismisses it

Browse Source
This commit is contained in:
Elian Doran 2025-12-23 21:06:47 +02:00
parent 1eebc8ff77
commit a6c7610fcc
No known key found for this signature in database
1 changed files with 12 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -2,10 +2,11 @@ import { Dropdown as BootstrapDropdown, Tooltip } from "bootstrap";
import { ComponentChildren, HTMLAttributes } from "preact";
import { CSSProperties, HTMLProps } from "preact/compat";
import { MutableRef, useCallback, useEffect, useRef, useState } from "preact/hooks";
import { useTooltip, useUniqueName } from "./hooks";
type DataAttributes = {
[key: `data-${string}`]: string | number | boolean | undefined;
[key: `data-${string}`]: string | number | boolean | undefined;
};
export interface DropdownProps extends Pick<HTMLProps<HTMLDivElement>, "id" | "className"> {
@ -66,14 +67,14 @@ export default function Dropdown({ id, className, buttonClassName, isStatic, chi
return () => {
resizeObserver.disconnect();
dropdown.dispose();
}
};
}, []);
const onShown = useCallback(() => {
setShown(true);
externalOnShown?.();
hideTooltip();
}, [ hideTooltip ])
}, [ hideTooltip ]);
const onHidden = useCallback(() => {
setShown(false);
@ -122,7 +123,7 @@ export default function Dropdown({ id, className, buttonClassName, isStatic, chi
{...buttonProps}
>
{text}
<span className="caret"></span>
<span className="caret" />
</button>
<ul
@ -130,9 +131,15 @@ export default function Dropdown({ id, className, buttonClassName, isStatic, chi
style={dropdownContainerStyle}
aria-labelledby={ariaId}
ref={dropdownContainerRef}
onClick={(e) => {
// Prevent clicks directly inside the dropdown from closing.
if (e.target === dropdownContainerRef.current) {
e.stopPropagation();
}
}}
>
{shown && children}
</ul>
</div>
)
);
}