From aeb962531be7d763d2df715c1c553d010de123a1 Mon Sep 17 00:00:00 2001
From: Nathan Kluth <nlkluth@gmail.com>
Date: Mon, 4 Dec 2023 13:47:09 -0700
Subject: [PATCH] warnings

---
 packages/nextjs/app/migration/components.tsx                  | 1 +
 .../nextjs/components/ProductPage/ProductVariantSelector.tsx  | 1 +
 packages/shared-ui/components/ProductSort/ProductSort.tsx     | 1 +
 packages/shared-ui/components/Select.tsx                      | 4 +++-
 4 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/packages/nextjs/app/migration/components.tsx b/packages/nextjs/app/migration/components.tsx
index ae835b31..d86ad762 100644
--- a/packages/nextjs/app/migration/components.tsx
+++ b/packages/nextjs/app/migration/components.tsx
@@ -38,6 +38,7 @@ export default function ComponentsPage() {
       <h1 className="text-h4">Select</h1>
       <div className="mb-8 mt-2">
         <Select
+          id="demo"
           label="Label"
           placeholder="Placeholder Text"
           options={[
diff --git a/packages/nextjs/components/ProductPage/ProductVariantSelector.tsx b/packages/nextjs/components/ProductPage/ProductVariantSelector.tsx
index 069afeda..ac2273a4 100644
--- a/packages/nextjs/components/ProductPage/ProductVariantSelector.tsx
+++ b/packages/nextjs/components/ProductPage/ProductVariantSelector.tsx
@@ -31,6 +31,7 @@ export const ProductVariantSelector = ({ variants, selectedVariant, onVariantCha
       ) : (
         <Select
           options={options}
+          id="product-variants-select"
           placeholder="Select a flavour"
           selectedItem={{
             title: selectedVariant?.name ?? "",
diff --git a/packages/shared-ui/components/ProductSort/ProductSort.tsx b/packages/shared-ui/components/ProductSort/ProductSort.tsx
index 847d485b..17210e09 100644
--- a/packages/shared-ui/components/ProductSort/ProductSort.tsx
+++ b/packages/shared-ui/components/ProductSort/ProductSort.tsx
@@ -52,6 +52,7 @@ export const ProductSort: React.FC<ProductSortProps> = ({
         <Select
           label=""
           placeholder={title}
+          id="sort-select"
           selectedItem={selectedItem}
           options={elements}
           className={selectClassName}
diff --git a/packages/shared-ui/components/Select.tsx b/packages/shared-ui/components/Select.tsx
index 0bd5eb57..4530bda8 100644
--- a/packages/shared-ui/components/Select.tsx
+++ b/packages/shared-ui/components/Select.tsx
@@ -11,6 +11,7 @@ export interface Props {
   options: Option[];
   label?: string;
   placeholder: string;
+  id: string;
   selectedItem?: Option | null;
   className?: string;
   onChange?: (value?: Option | null) => void;
@@ -18,11 +19,12 @@ export interface Props {
 
 const itemToString = (item: Option | null) => (item ? item.title : "");
 
-export function Select({ label, placeholder, options, className, selectedItem, onChange }: Props) {
+export function Select({ label, placeholder, options, className, selectedItem, onChange, id }: Props) {
   const { isOpen, getToggleButtonProps, getLabelProps, getMenuProps, highlightedIndex, getItemProps } = useSelect({
     items: options,
     itemToString,
     selectedItem,
+    id,
     onSelectedItemChange({ selectedItem }) {
       onChange && onChange(selectedItem);
     },