@snapdragonsnursery/react-components 1.17.7 → 1.17.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@snapdragonsnursery/react-components",
-  "version": "1.17.7",
+  "version": "1.17.9",
   "description": "",
   "main": "src/index.js",
   "scripts": {

package/src/components/EmployeeSelect.jsx

@@ -26,12 +26,17 @@
 // - showSiteName?: boolean               // show site below name (default: true)
 // - showEmployeeId?: boolean             // show employee ID below name (default: false)
 // - showEmail?: boolean                  // show email below name (default: false)
-// - placeholder?: string
+// - placeholder?: string                 // select trigger placeholder (default: 'Select employee…')
+// - searchPlaceholder?: string           // search input placeholder (default: 'Search employees...')
 // - disabled?: boolean
 // - className?: string
 // - allowAll?: boolean                   // include "All employees" option
 // - allLabel?: string                    // custom label for all option
 // - maxHeight?: string                   // max height for dropdown (default: '160px')
+// - enableServerSearch?: boolean         // enable server-side search (default: false)
+// - onSearchChange?: (query: string) => void // callback for search query changes
+// - searchResults?: Array<employee>      // search results from server
+// - isSearching?: boolean                // loading state for server search
 
 import React from "react";
 import { Users, Search } from "lucide-react";
@@ -56,6 +61,7 @@ export const EmployeeSelect = ({
   showEmployeeId = false,
   showEmail = false,
   placeholder = "Select employee…",
+  searchPlaceholder = "Search employees...",
   disabled = false,
   className,
   allowAll = false,
@@ -70,6 +76,7 @@ export const EmployeeSelect = ({
   const [searchTerm, setSearchTerm] = React.useState("");
   const [isOpen, setIsOpen] = React.useState(false);
   const [debouncedSearchTerm, setDebouncedSearchTerm] = React.useState("");
+  const searchInputRef = React.useRef(null);
 
   // Debounce search term for server-side search
   React.useEffect(() => {
@@ -83,6 +90,16 @@ export const EmployeeSelect = ({
     return () => clearTimeout(timer);
   }, [searchTerm, enableServerSearch, onSearchChange]);
 
+  // Maintain focus on search input when server results update
+  React.useEffect(() => {
+    if (enableServerSearch && isOpen && searchInputRef.current && document.activeElement !== searchInputRef.current) {
+      // Only refocus if we previously had focus (i.e., user was typing)
+      if (searchTerm && !isSearching) {
+        searchInputRef.current.focus();
+      }
+    }
+  }, [searchResults, enableServerSearch, isOpen, searchTerm, isSearching]);
+
   // Helper function to generate initials from full name
   const getInitials = (name) => {
     if (!name) return "??";
@@ -239,8 +256,9 @@ export const EmployeeSelect = ({
           <div className="relative">
             <Search className="absolute left-2 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground" />
             <input
+              ref={searchInputRef}
               type="text"
-              placeholder={enableServerSearch ? "Search employees..." : "Search employees..."}
+              placeholder={searchPlaceholder}
               value={searchTerm}
               onChange={(e) => setSearchTerm(e.target.value)}
               className="w-full pl-8 pr-3 py-2 text-sm border rounded-md focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 bg-background"