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

Fix sidebar request focus

Browse Source
This commit is contained in:
Gregory Schier
2023-04-09 22:03:41 -07:00
parent 0f33fd2588
commit d9916f520e
2 changed files with 10 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -46,6 +46,7 @@ export const Sidebar = memo(function Sidebar({ className }: Props) {
(forcedIndex?: number) => { (forcedIndex?: number) => {
const index = forcedIndex ?? requests.findIndex((r) => r.id === activeRequestId); const index = forcedIndex ?? requests.findIndex((r) => r.id === activeRequestId);
setSelectedIndex(index >= 0 ? index : 0); setSelectedIndex(index >= 0 ? index : 0);
setHasFocus(true);
sidebarRef.current?.focus(); sidebarRef.current?.focus();
}, },
[activeRequestId, requests], [activeRequestId, requests],
@@ -63,7 +64,7 @@ export const Sidebar = memo(function Sidebar({ className }: Props) {
[activeRequestId, focusActiveRequest, requests, routes], [activeRequestId, focusActiveRequest, requests, routes],
); );
const handleFocus = useCallback(() => setHasFocus(true), []); const handleFocus = useCallback(() => focusActiveRequest(), [focusActiveRequest]);
const handleBlur = useCallback(() => setHasFocus(false), []); const handleBlur = useCallback(() => setHasFocus(false), []);
useTauriEvent( useTauriEvent(

9
src-web/components/core/Dropdown.tsx
View File

@@ -359,7 +359,14 @@ function MenuItem({ className, focused, onFocus, item, onSelect, ...props }: Men
{...props} {...props}
> >
{item.leftSlot && <div className="pr-2 flex justify-start">{item.leftSlot}</div>} {item.leftSlot && <div className="pr-2 flex justify-start">{item.leftSlot}</div>}
<div>{item.label}</div> <div
className={classnames(
// Add padding on right when no right slot, for some visual balance
!item.rightSlot && 'pr-4',
)}
>
{item.label}
</div>
{item.rightSlot && <div className="ml-auto pl-3">{item.rightSlot}</div>} {item.rightSlot && <div className="ml-auto pl-3">{item.rightSlot}</div>}
</button> </button>
); );