ros/automaker
1
0
Fork 0
mirror of https://github.com/AutoMaker-Org/automaker.git synced 2026-02-03 08:53:36 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor: update KbdGroup component to use span instead of kbd; enhance PathInput with autoFocus on CommandInput

Browse Source
This commit is contained in:
Illia Filippov
2025-12-25 01:50:03 +01:00
parent bed8038d16
commit cd30306afe
2 changed files with 7 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
apps/ui/src/components/ui/kbd.tsx
View File

@@ -15,9 +15,9 @@ function Kbd({ className, ...props }: React.ComponentProps<'kbd'>) {
); );
} }
function KbdGroup({ className, ...props }: React.ComponentProps<'div'>) { function KbdGroup({ className, ...props }: React.ComponentProps<'span'>) {
return ( return (
<kbd <span
data-slot="kbd-group" data-slot="kbd-group"
className={cn('inline-flex items-center gap-1', className)} className={cn('inline-flex items-center gap-1', className)}
{...props} {...props}

21
apps/ui/src/components/ui/path-input.tsx
View File

@@ -127,21 +127,6 @@ function PathInput({
} }
}, [error, isEditing]); }, [error, isEditing]);
// Focus search input when search opens
useEffect(() => {
if (isSearchOpen) {
// Small delay to ensure the CommandInput is rendered
setTimeout(() => {
const searchInput = containerRef.current?.querySelector(
'[data-slot="command-input"]'
) as HTMLInputElement;
if (searchInput) {
searchInput.focus();
}
}, 0);
}
}, [isSearchOpen]);
const handleGoToParent = useCallback(() => { const handleGoToParent = useCallback(() => {
if (parentPath) { if (parentPath) {
onNavigate(parentPath); onNavigate(parentPath);
@@ -308,7 +293,11 @@ function PathInput({
<div className="absolute inset-0 bg-popover border border-border rounded-md shadow-lg"> <div className="absolute inset-0 bg-popover border border-border rounded-md shadow-lg">
<Command className="h-auto max-h-[300px]"> <Command className="h-auto max-h-[300px]">
<div className="flex items-center gap-2 px-3 **:data-[slot=command-input-wrapper]:border-0 **:data-[slot=command-input-wrapper]:px-0"> <div className="flex items-center gap-2 px-3 **:data-[slot=command-input-wrapper]:border-0 **:data-[slot=command-input-wrapper]:px-0">
<CommandInput placeholder={searchPlaceholder} className="h-8 flex-1" /> <CommandInput
autoFocus
placeholder={searchPlaceholder}
className="h-8 flex-1"
/>
<div className="flex items-center gap-1 shrink-0 ml-auto"> <div className="flex items-center gap-1 shrink-0 ml-auto">
<Button <Button
variant="ghost" variant="ghost"