@papernote/ui 1.7.4 → 1.7.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@papernote/ui",
-  "version": "1.7.4",
+  "version": "1.7.6",
   "type": "module",
   "description": "A modern React component library with a paper notebook aesthetic - minimal, professional, and expressive",
   "main": "dist/index.js",

package/src/components/Autocomplete.tsx

@@ -97,10 +97,13 @@ const Autocomplete = forwardRef<AutocompleteHandle, AutocompleteProps>(({
         const results = await onSearch(query);
         setFilteredOptions(results.slice(0, maxResults));
         setIsOpen(results.length > 0);
+        // Auto-highlight first result for keyboard navigation
+        setHighlightedIndex(results.length > 0 ? 0 : -1);
       } catch (err) {
         console.error('Autocomplete search error:', err);
         setFilteredOptions([]);
         setIsOpen(false);
+        setHighlightedIndex(-1);
       } finally {
         setLoading(false);
       }
@@ -109,6 +112,8 @@ const Autocomplete = forwardRef<AutocompleteHandle, AutocompleteProps>(({
       const filtered = filterOptions(query);
       setFilteredOptions(filtered);
       setIsOpen(filtered.length > 0);
+      // Auto-highlight first result for keyboard navigation
+      setHighlightedIndex(filtered.length > 0 ? 0 : -1);
     }
   };
 
@@ -151,7 +156,15 @@ const Autocomplete = forwardRef<AutocompleteHandle, AutocompleteProps>(({
   const handleKeyDown = (e: React.KeyboardEvent) => {
     if (!isOpen) {
       if (e.key === 'ArrowDown') {
-        handleSearch(value);
+        e.preventDefault();
+        // If we have cached results from a previous search, show them
+        if (filteredOptions.length > 0) {
+          setIsOpen(true);
+          setHighlightedIndex(0);
+        } else if (value.length >= minChars) {
+          // Otherwise trigger a new search
+          handleSearch(value);
+        }
       }
       return;
     }

package/src/components/FormWizard.tsx

@@ -68,8 +68,11 @@ export default function FormWizard({
         setIsSubmitting(false);
       }
     } else {
-      // Go to next step
-      goToStep(currentStep + 1);
+      // Advance to next step directly (don't use goToStep which checks completedSteps
+      // before React has re-rendered with the updated state)
+      const nextStepIndex = currentStep + 1;
+      setCurrentStep(nextStepIndex);
+      onStepChange?.(nextStepIndex);
     }
   };