diff --git a/node_modules/@graphcommerce/magento-search/components/ProductFiltersPro/SearchField.tsx b/node_modules/@graphcommerce/magento-search/components/ProductFiltersPro/SearchField.tsx
index e2e243d..ffb63af 100644
--- a/node_modules/@graphcommerce/magento-search/components/ProductFiltersPro/SearchField.tsx
+++ b/node_modules/@graphcommerce/magento-search/components/ProductFiltersPro/SearchField.tsx
@@ -2,9 +2,8 @@ import { iconSearch, IconSvg, showPageLoadIndicator } from '@graphcommerce/next-
 import type { FabProps } from '@mui/material'
 import { Fab } from '@mui/material'
 import dynamic from 'next/dynamic'
-import { useMemo, useState } from 'react'
+import { useEffect } from 'react'
 import type { ProductFiltersProSearchInputProps } from './ProductFiltersProSearchInput'
-import { useSearchPageAndParam } from './useSearchPageAndParam'
 
 export type SearchFieldProps = ProductFiltersProSearchInputProps & {
   fab?: FabProps
@@ -17,44 +16,38 @@ const ProductFiltersProSearchInputLazy = dynamic(
 )
 
 export function SearchField(props: SearchFieldProps) {
-  const { fab, formControl, visible: incomingVisible } = props
+  const { fab, formControl } = props
 
-  const [searchPage] = useSearchPageAndParam()
-  const [expanded, setExpanded] = useState(searchPage)
-  useMemo(() => {
-    if (!searchPage) setExpanded(searchPage)
-  }, [searchPage])
-
-  const visible = incomingVisible || expanded || searchPage
+  useEffect(() => {
+    // Ensure the search field is focused when the component mounts
+    setTimeout(() => {
+      document.querySelector<HTMLInputElement>('input')?.focus()
+    }, 100)
+  }, [])
 
   return (
     <>
-      {visible && (
-        <ProductFiltersProSearchInputLazy
-          {...props}
-          formControl={formControl}
-          inputRef={(element: HTMLInputElement) => element?.focus()}
-          // autoFocus
-          buttonProps={{
-            onClick: () => {
-              setExpanded(false)
-            },
-          }}
-          onBlur={() => {
-            if (!searchPage && !showPageLoadIndicator.get()) setExpanded(false)
-          }}
-        />
-      )}
+      {/* Search Field Always Visible */}
+      <ProductFiltersProSearchInputLazy
+        {...props}
+        formControl={formControl}
+        inputRef={(element: HTMLInputElement) => element?.focus()}
+        onBlur={(event) => {
+          event.preventDefault()
+          event.stopPropagation() // Prevent closing on blur
+        }}
+      />
+
+      {/* Search Icon (Still Present) */}
       <Fab
         onClick={() => {
-          setExpanded(true)
-          // inputRef.current?.focus()
+          document.querySelector<HTMLInputElement>('input')?.focus()
         }}
         color='inherit'
         size='large'
         {...fab}
         sx={[
-          { display: { xs: visible ? 'none' : 'inline-flex' } },
+          { display: { xs: 'inline-flex' } },
           ...(Array.isArray(fab?.sx) ? fab.sx : [fab?.sx]),
         ]}
       >
@@ -63,3 +56,82 @@ export function SearchField(props: SearchFieldProps) {
     </>
   )
 }
+
+
+
+
+
+
+
+
+
+
+//original code 
+
+
+
+// import { iconSearch, IconSvg, showPageLoadIndicator } from '@graphcommerce/next-ui'
+// import type { FabProps } from '@mui/material'
+// import { Fab } from '@mui/material'
+// import dynamic from 'next/dynamic'
+// import { useMemo, useState } from 'react'
+// import type { ProductFiltersProSearchInputProps } from './ProductFiltersProSearchInput'
+// import { useSearchPageAndParam } from './useSearchPageAndParam'
+
+// export type SearchFieldProps = ProductFiltersProSearchInputProps & {
+//   fab?: FabProps
+//   visible?: boolean
+//   searchField?: Record<string, unknown>
+// }
+
+// const ProductFiltersProSearchInputLazy = dynamic(
+//   async () => (await import('./ProductFiltersProSearchInput')).ProductFiltersProSearchOutlinedInput,
+// )
+
+// export function SearchField(props: SearchFieldProps) {
+//   const { fab, formControl, visible: incomingVisible } = props
+
+//   const [searchPage] = useSearchPageAndParam()
+//   const [expanded, setExpanded] = useState(searchPage)
+//   useMemo(() => {
+//     if (!searchPage) setExpanded(searchPage)
+//   }, [searchPage])
+
+//   const visible = incomingVisible || expanded || searchPage
+
+//   return (
+//     <>
+//       {visible && (
+//         <ProductFiltersProSearchInputLazy
+//           {...props}
+//           formControl={formControl}
+//           inputRef={(element: HTMLInputElement) => element?.focus()}
+//           // autoFocus
+//           buttonProps={{
+//             onClick: () => {
+//               setExpanded(false)
+//             },
+//           }}
+//           onBlur={() => {
+//             if (!searchPage && !showPageLoadIndicator.get()) setExpanded(false)
+//           }}
+//         />
+//       )}
+//       <Fab
+//         onClick={() => {
+//           setExpanded(true)
+//           // inputRef.current?.focus()
+//         }}
+//         color='inherit'
+//         size='large'
+//         {...fab}
+//         sx={[
+//           { display: { xs: visible ? 'none' : 'inline-flex' } },
+//           ...(Array.isArray(fab?.sx) ? fab.sx : [fab?.sx]),
+//         ]}
+//       >
+//         <IconSvg src={iconSearch} size='large' />
+//       </Fab>
+//     </>
+//   )
+// }
