@butternutbox/pawprint-native 1.3.0 → 1.3.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@butternutbox/pawprint-native",
-  "version": "1.3.0",
+  "version": "1.3.1",
   "type": "module",
   "description": "ButternutBox Pawprint Design System - React Native Components",
   "main": "./dist/index.cjs",

package/src/__mocks__/react-native.tsx

@@ -128,6 +128,7 @@ export const TextInput = React.forwardRef<HTMLInputElement, any>(
       placeholderTextColor: _placeholderTextColor,
       onChangeText,
       onChange,
+      onBlur,
       value,
       defaultValue,
       placeholder,
@@ -147,6 +148,7 @@ export const TextInput = React.forwardRef<HTMLInputElement, any>(
         placeholder={placeholder}
         disabled={editable === false}
         aria-disabled={accessibilityState?.disabled}
+        onBlur={onBlur}
         onChange={(e) => {
           onChangeText?.(e.target.value)
           onChange?.(e)

package/src/components/molecules/SelectField/SelectField.test.tsx

@@ -375,6 +375,24 @@ describe("SelectField", () => {
       fireEvent.click(screen.getByTestId("select-overlay"))
       expect(screen.queryByPlaceholderText("Search...")).not.toBeInTheDocument()
     })
+
+    it("re-focuses the search input when it blurs while the dropdown is open", () => {
+      renderWithTheme(
+        <SelectField label="Country" placeholder="Select a country" searchable>
+          <SelectField.Item value="uk">United Kingdom</SelectField.Item>
+        </SelectField>
+      )
+
+      openDropdownWithContent()
+      const input = screen.getByPlaceholderText("Search...")
+      vi.useFakeTimers()
+      input.blur()
+      expect(input).not.toHaveFocus()
+
+      act(() => vi.advanceTimersByTime(50))
+      vi.useRealTimers()
+      expect(input).toHaveFocus()
+    })
   })
 
   describe("when searchable with an async query", () => {

package/src/components/molecules/SelectField/SelectField.tsx

@@ -315,6 +315,17 @@ const SelectFieldRoot = React.forwardRef<View, SelectFieldProps>(
       // Re-running here re-focuses the input so typing is not interrupted.
     }, [isOpen, searchable, isSearching, searchQuery])
 
+    const isOpenRef = React.useRef(isOpen)
+    React.useEffect(() => {
+      isOpenRef.current = isOpen
+    })
+
+    const handleSearchBlur = () => {
+      setTimeout(() => {
+        if (isOpenRef.current) searchInputRef.current?.focus()
+      }, 50)
+    }
+
     const isCompound = React.Children.toArray(children).some(
       (child) =>
         React.isValidElement(child) && child.type === SelectFieldContent
@@ -447,6 +458,7 @@ const SelectFieldRoot = React.forwardRef<View, SelectFieldProps>(
                 ref={searchInputRef}
                 value={searchQuery}
                 onChangeText={setSearchQuery}
+                onBlur={handleSearchBlur}
                 placeholder={searchPlaceholder ?? "Search..."}
                 returnKeyType="search"
                 clearButtonMode="never"