Merge pull request #4 from Shopify/bl-fix-1800

Fix keyboard navigation on the PDP
Shopify · Mar 6, 2024 · 46a21f6 · 46a21f6
2 parents 33a5b11 + 3369439
commit 46a21f6
Show file tree

Hide file tree

Showing 2 changed files with 96 additions and 13 deletions.
diff --git a/app/routes/($locale).products.$productHandle.tsx b/app/routes/($locale).products.$productHandle.tsx
@@ -1,7 +1,7 @@
 import {useRef, Suspense} from 'react';
 import {Disclosure, Listbox} from '@headlessui/react';
 import {defer, redirect, type LoaderFunctionArgs} from '@shopify/remix-oxygen';
-import {useLoaderData, Await} from '@remix-run/react';
+import {useLoaderData, Await, useNavigate} from '@remix-run/react';
 import type {ShopifyAnalyticsProduct} from '@shopify/hydrogen';
 import {
   AnalyticsPageType,
@@ -235,6 +235,8 @@ export function ProductForm({
     quantity: 1,
   };
 
+  const navigate = useNavigate();
+
   return (
     <div className="grid gap-10">
       <div className="grid gap-4">
@@ -255,7 +257,17 @@ export function ProductForm({
                 <div className="flex flex-wrap items-baseline gap-4">
                   {option.values.length > 7 ? (
                     <div className="relative w-full">
-                      <Listbox>
+                      <Listbox
+                        onChange={(selectedOption) => {
+                          const value = option.values.find(
+                            (v) => v.value === selectedOption,
+                          );
+
+                          if (value) {
+                            navigate(value.to);
+                          }
+                        }}
+                      >
                         {({open}) => (
                           <>
                             <Listbox.Button