mirror of
https://github.com/kilyabin/psysonic.git
synced 2026-07-22 14:35:41 +00:00
fix(ui): dismiss tooltip on mousedown; hide library dropdown hint while open
TooltipPortal clears the overlay when mousedown hits any [data-tooltip] anchor so click-open controls (e.g. library scope) do not leave a stale hover tooltip. The library scope trigger omits data-tooltip while the dropdown is open.
This commit is contained in:
@@ -150,7 +150,7 @@ export default function Sidebar({
|
|||||||
aria-label={t('sidebar.libraryScope')}
|
aria-label={t('sidebar.libraryScope')}
|
||||||
aria-expanded={libraryDropdownOpen}
|
aria-expanded={libraryDropdownOpen}
|
||||||
aria-haspopup="listbox"
|
aria-haspopup="listbox"
|
||||||
data-tooltip={t('sidebar.libraryScope')}
|
data-tooltip={libraryDropdownOpen ? undefined : t('sidebar.libraryScope')}
|
||||||
data-tooltip-pos="bottom"
|
data-tooltip-pos="bottom"
|
||||||
>
|
>
|
||||||
{!libraryTriggerPlain ? (
|
{!libraryTriggerPlain ? (
|
||||||
|
|||||||
@@ -35,13 +35,20 @@ export default function TooltipPortal() {
|
|||||||
const target = (e.target as HTMLElement).closest('[data-tooltip]');
|
const target = (e.target as HTMLElement).closest('[data-tooltip]');
|
||||||
if (!target) setTooltip(null);
|
if (!target) setTooltip(null);
|
||||||
};
|
};
|
||||||
|
/** Clicking a tooltip anchor (e.g. opening a dropdown) keeps the cursor inside the element, so mouseout never runs — hide immediately. */
|
||||||
|
const onDown = (e: MouseEvent) => {
|
||||||
|
const t = (e.target as HTMLElement).closest('[data-tooltip]');
|
||||||
|
if (t) setTooltip(null);
|
||||||
|
};
|
||||||
document.addEventListener('mouseover', onOver);
|
document.addEventListener('mouseover', onOver);
|
||||||
document.addEventListener('mouseout', onOut);
|
document.addEventListener('mouseout', onOut);
|
||||||
document.addEventListener('mousemove', onMove, { passive: true });
|
document.addEventListener('mousemove', onMove, { passive: true });
|
||||||
|
document.addEventListener('mousedown', onDown, true);
|
||||||
return () => {
|
return () => {
|
||||||
document.removeEventListener('mouseover', onOver);
|
document.removeEventListener('mouseover', onOver);
|
||||||
document.removeEventListener('mouseout', onOut);
|
document.removeEventListener('mouseout', onOut);
|
||||||
document.removeEventListener('mousemove', onMove);
|
document.removeEventListener('mousemove', onMove);
|
||||||
|
document.removeEventListener('mousedown', onDown, true);
|
||||||
};
|
};
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user