@graphcommerce/magento-search 9.0.0-canary.58 → 9.0.0-canary.59

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Change Log
 
+## 9.0.0-canary.59
+
+### Patch Changes
+
+- [#2309](https://github.com/graphcommerce-org/graphcommerce/pull/2309) [`03e410f`](https://github.com/graphcommerce-org/graphcommerce/commit/03e410f7ad59ce94a6ff199809999e56ff8cc1f5) - Solve issue where the input field wouldn't open and wouldn't be focussed on render. ([@Renzovh](https://github.com/Renzovh))
+
 ## 9.0.0-canary.58
 
 ### Patch Changes

package/components/{SearchForm → ProductFiltersPro}/ProductFiltersProSearchField.tsx

@@ -1,9 +1,9 @@
 import { IconSvg, iconSearch, showPageLoadIndicator } from '@graphcommerce/next-ui'
 import { Fab, FabProps } from '@mui/material'
-import { useMemo, useRef, useState } from 'react'
+import dynamic from 'next/dynamic'
+import { useMemo, useState } from 'react'
 import { ProductFiltersProSearchInputProps } from './ProductFiltersProSearchInput'
 import { useSearchPageAndParam } from './useSearchPageAndParam'
-import dynamic from 'next/dynamic'
 
 type ProductFiltersProSearchFieldProps = ProductFiltersProSearchInputProps & {
   fab?: FabProps
@@ -19,11 +19,10 @@ export function ProductFiltersProSearchField(props: ProductFiltersProSearchField
   const [searchPage] = useSearchPageAndParam()
   const [expanded, setExpanded] = useState(searchPage)
   useMemo(() => {
-    if (expanded !== searchPage) setExpanded(searchPage)
-  }, [expanded, searchPage])
+    if (!searchPage) setExpanded(searchPage)
+  }, [searchPage])
 
   const visible = expanded || searchPage
-  const inputRef = useRef<HTMLInputElement>(null)
 
   return (
     <>
@@ -31,7 +30,8 @@ export function ProductFiltersProSearchField(props: ProductFiltersProSearchField
         <ProductFiltersProSearchInputLazy
           {...props}
           formControl={formControl}
-          inputRef={inputRef}
+          inputRef={(element: HTMLInputElement) => element?.focus()}
+          // autoFocus
           buttonProps={{
             onClick: () => {
               setExpanded(false)
@@ -45,17 +45,13 @@ export function ProductFiltersProSearchField(props: ProductFiltersProSearchField
       <Fab
         onClick={() => {
           setExpanded(true)
-          inputRef.current?.focus()
+          // inputRef.current?.focus()
         }}
         color='inherit'
         size='large'
         {...fab}
         sx={[
-          {
-            display: {
-              xs: visible ? 'none' : 'inline-flex',
-            },
-          },
+          { display: { xs: visible ? 'none' : 'inline-flex' } },
           ...(Array.isArray(fab?.sx) ? fab.sx : [fab?.sx]),
         ]}
       >

package/hooks/useProductList.ts

@@ -14,6 +14,7 @@ import { StoreConfigDocument } from '@graphcommerce/magento-store'
 import { useEventCallback } from '@mui/material'
 import {
   productListApplySearchDefaults,
+  searchDefaultsToProductListFilters,
   useProductListApplySearchDefaults,
 } from '../utils/productListApplySearchDefaults'
 
@@ -31,10 +32,9 @@ export function useProductList<
   const { params, shallow } = useRouterFilterParams(props)
   const variables = useProductListApplySearchDefaults(params)
   const result = useInContextQuery(ProductListDocument, { variables, skip: !shallow }, props)
-
   const filters = useInContextQuery(
     ProductFiltersDocument,
-    { variables: { search: params?.search }, skip: !shallow },
+    { variables: searchDefaultsToProductListFilters(variables), skip: !shallow },
     props,
   )
 
@@ -44,8 +44,10 @@ export function useProductList<
     async (formValues, next) => {
       if (!storeConfig) return
 
+      const vars = productListApplySearchDefaults(toProductListParams(formValues), storeConfig)
       await prefetchProductList(
-        productListApplySearchDefaults(toProductListParams(formValues), storeConfig),
+        vars,
+        searchDefaultsToProductListFilters(vars),
         next,
         result.client,
         true,

package/index.ts

@@ -23,4 +23,4 @@ export {
 
 export * from '@graphcommerce/magento-product/components/ProductFiltersPro'
 export * from './utils/productListApplySearchDefaults'
-export * from './components/SearchForm/ProductFiltersProSearchField'
+export * from './components/ProductFiltersPro/ProductFiltersProSearchField'

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/magento-search",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "9.0.0-canary.58",
+  "version": "9.0.0-canary.59",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {
@@ -12,16 +12,16 @@
     }
   },
   "peerDependencies": {
-    "@graphcommerce/ecommerce-ui": "^9.0.0-canary.58",
-    "@graphcommerce/eslint-config-pwa": "^9.0.0-canary.58",
-    "@graphcommerce/graphql": "^9.0.0-canary.58",
-    "@graphcommerce/image": "^9.0.0-canary.58",
-    "@graphcommerce/magento-product": "^9.0.0-canary.58",
-    "@graphcommerce/magento-store": "^9.0.0-canary.58",
-    "@graphcommerce/next-ui": "^9.0.0-canary.58",
-    "@graphcommerce/prettier-config-pwa": "^9.0.0-canary.58",
-    "@graphcommerce/react-hook-form": "^9.0.0-canary.58",
-    "@graphcommerce/typescript-config-pwa": "^9.0.0-canary.58",
+    "@graphcommerce/ecommerce-ui": "^9.0.0-canary.59",
+    "@graphcommerce/eslint-config-pwa": "^9.0.0-canary.59",
+    "@graphcommerce/graphql": "^9.0.0-canary.59",
+    "@graphcommerce/image": "^9.0.0-canary.59",
+    "@graphcommerce/magento-product": "^9.0.0-canary.59",
+    "@graphcommerce/magento-store": "^9.0.0-canary.59",
+    "@graphcommerce/next-ui": "^9.0.0-canary.59",
+    "@graphcommerce/prettier-config-pwa": "^9.0.0-canary.59",
+    "@graphcommerce/react-hook-form": "^9.0.0-canary.59",
+    "@graphcommerce/typescript-config-pwa": "^9.0.0-canary.59",
     "@lingui/core": "^4.2.1",
     "@lingui/macro": "^4.2.1",
     "@lingui/react": "^4.2.1",

package/utils/productListApplySearchDefaults.ts

@@ -39,3 +39,12 @@ export function productListApplySearchDefaults(
 
   return newParams
 }
+
+export function searchDefaultsToProductListFilters(
+  variables: ProductListQueryVariables | undefined,
+): ProductListQueryVariables {
+  return {
+    ...variables,
+    filters: {},
+  }
+}