From 29aaa8cac67ca51e5ac6e33721eda611c4c45c31 Mon Sep 17 00:00:00 2001
From: Michael Novotny <manovotny@gmail.com>
Date: Tue, 25 Jul 2023 11:00:31 -0500
Subject: [PATCH] Disables link scroll on variant selection (#1109)

* Disables link scroll on variant selection

* Fix TS error
---
 components/grid/three-items.tsx         | 2 +-
 components/product/variant-selector.tsx | 5 +++++
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/components/grid/three-items.tsx b/components/grid/three-items.tsx
index 3afc98707..29bc3b273 100644
--- a/components/grid/three-items.tsx
+++ b/components/grid/three-items.tsx
@@ -38,7 +38,7 @@ export async function ThreeItemGrid() {
   const [firstProduct, secondProduct, thirdProduct] = homepageItems;
 
   return (
-    <section className="mx-auto max-w-screen-2xl gap-4 pb-4 lg:grid lg:grid-cols-6 lg:grid-rows-2">
+    <section className="mx-auto grid max-w-screen-2xl gap-4 pb-4 lg:grid-cols-6 lg:grid-rows-2">
       <ThreeItemGridItem size="full" item={firstProduct} />
       <ThreeItemGridItem size="half" item={secondProduct} />
       <ThreeItemGridItem size="half" item={thirdProduct} />
diff --git a/components/product/variant-selector.tsx b/components/product/variant-selector.tsx
index 3b2e8ac36..188a5b406 100644
--- a/components/product/variant-selector.tsx
+++ b/components/product/variant-selector.tsx
@@ -107,10 +107,14 @@ export function VariantSelector({
           )?.availableForSale;
 
           const DynamicTag = isAvailableForSale ? Link : 'p';
+          const dynamicProps = {
+            ...(isAvailableForSale && { scroll: false })
+          };
 
           return (
             <DynamicTag
               key={value}
+              aria-disabled={!isAvailableForSale}
               href={optionUrl}
               title={`${option.name} ${value}${!isAvailableForSale ? ' (Out of Stock)' : ''}`}
               className={clsx(
@@ -123,6 +127,7 @@ export function VariantSelector({
                     !isAvailableForSale
                 }
               )}
+              {...dynamicProps}
             >
               {value}
             </DynamicTag>