starred/yaak-mountain-loop
1
0
Fork 0
mirror of https://github.com/mountain-loop/yaak.git synced 2026-04-10 19:16:55 +02:00
Code Issues 8 Packages Projects Releases 10 Wiki Activity

Fix sidebar focus max recursion

Browse Source
This commit is contained in:
Gregory Schier
2023-11-06 10:40:02 -08:00
parent 9c214b619c
commit 0a5d71ecc2
1 changed files with 36 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

70
src-web/components/Sidebar.tsx
View File

@@ -110,7 +110,8 @@ export const Sidebar = memo(function Sidebar({ className }: Props) {
useListenToTauriEvent('new_request', async () => createRequest.mutate({})); useListenToTauriEvent('new_request', async () => createRequest.mutate({}));
const focusActiveRequest = useCallback( const focusActiveRequest = useCallback(
(forced?: { id: string; tree: TreeNode }) => { (args: { forced?: { id: string; tree: TreeNode }; noFocusSidebar?: boolean } = {}) => {
const { forced, noFocusSidebar } = args;
const tree = forced?.tree ?? treeParentMap[activeRequestId ?? 'n/a'] ?? null; const tree = forced?.tree ?? treeParentMap[activeRequestId ?? 'n/a'] ?? null;
const children = tree?.children ?? []; const children = tree?.children ?? [];
const id = forced?.id ?? children.find((m) => m.item.id === activeRequestId)?.item.id ?? null; const id = forced?.id ?? children.find((m) => m.item.id === activeRequestId)?.item.id ?? null;
@@ -121,7 +122,9 @@ export const Sidebar = memo(function Sidebar({ className }: Props) {
setSelectedId(id); setSelectedId(id);
setSelectedTree(tree); setSelectedTree(tree);
setHasFocus(true); setHasFocus(true);
sidebarRef.current?.focus(); if (!noFocusSidebar) {
sidebarRef.current?.focus();
}
}, },
[activeRequestId, treeParentMap], [activeRequestId, treeParentMap],
); );
@@ -147,7 +150,7 @@ export const Sidebar = memo(function Sidebar({ className }: Props) {
}); });
setSelectedId(id); setSelectedId(id);
setSelectedTree(tree); setSelectedTree(tree);
focusActiveRequest({ id, tree }); focusActiveRequest({ forced: { id, tree } });
} }
}, },
[treeParentMap, collapsed, routes, activeEnvironmentId, focusActiveRequest], [treeParentMap, collapsed, routes, activeEnvironmentId, focusActiveRequest],
@@ -160,7 +163,7 @@ export const Sidebar = memo(function Sidebar({ className }: Props) {
const handleFocus = useCallback(() => { const handleFocus = useCallback(() => {
if (hasFocus) return; if (hasFocus) return;
focusActiveRequest(); focusActiveRequest({ noFocusSidebar: true });
}, [focusActiveRequest, hasFocus]); }, [focusActiveRequest, hasFocus]);
const handleBlur = useCallback(() => setHasFocus(false), []); const handleBlur = useCallback(() => setHasFocus(false), []);
@@ -187,7 +190,7 @@ export const Sidebar = memo(function Sidebar({ className }: Props) {
// Select 0 index on focus if none selected // Select 0 index on focus if none selected
focusActiveRequest( focusActiveRequest(
selectedTree != null && selectedId != null selectedTree != null && selectedId != null
? { id: selectedId, tree: selectedTree } ? { forced: { id: selectedId, tree: selectedTree } }
: undefined, : undefined,
); );
}, },
@@ -336,34 +339,33 @@ export const Sidebar = memo(function Sidebar({ className }: Props) {
} }
return ( return (
<div aria-hidden={hidden} className="h-full"> <aside
<aside aria-hidden={hidden}
ref={sidebarRef} ref={sidebarRef}
onFocus={handleFocus} onFocus={handleFocus}
onBlur={handleBlur} onBlur={handleBlur}
tabIndex={hidden ? -1 : 0} tabIndex={hidden ? -1 : 0}
className={classNames( className={classNames(
className, className,
'h-full pb-3 overflow-y-scroll overflow-x-visible hide-scrollbars pt-2', 'h-full pb-3 overflow-y-scroll overflow-x-visible hide-scrollbars pt-2',
)} )}
> >
<SidebarItems <SidebarItems
treeParentMap={treeParentMap} treeParentMap={treeParentMap}
selectedId={selectedId} selectedId={selectedId}
selectedTree={selectedTree} selectedTree={selectedTree}
collapsed={collapsed.value} collapsed={collapsed.value}
tree={tree} tree={tree}
focused={hasFocus} focused={hasFocus}
draggingId={draggingId} draggingId={draggingId}
onSelect={handleSelect} onSelect={handleSelect}
hoveredIndex={hoveredIndex} hoveredIndex={hoveredIndex}
hoveredTree={hoveredTree} hoveredTree={hoveredTree}
handleMove={handleMove} handleMove={handleMove}
handleEnd={handleEnd} handleEnd={handleEnd}
handleDragStart={handleDragStart} handleDragStart={handleDragStart}
/> />
</aside> </aside>
</div>
); );
}); });
@@ -565,7 +567,7 @@ const SidebarItem = forwardRef(function SidebarItem(
title="Folder options" title="Folder options"
size="xs" size="xs"
icon="dotsV" icon="dotsV"
className="ml-auto !bg-transparent absolute right-2 opacity-20 group-hover/item:opacity-70 transition-opacity" className="ml-auto !bg-transparent absolute right-2 opacity-0 group-hover/item:opacity-70 transition-opacity"
/> />
</Dropdown> </Dropdown>
)} )}