From c7e1b328dfa904660ded7bbf9a3f73c435801355 Mon Sep 17 00:00:00 2001
From: Gabriele Petronella <gabriele@buildo.io>
Date: Wed, 26 Jun 2024 11:50:54 +0200
Subject: [PATCH] Fix SelectField hydration mismatch error

---
 .../bento-design-system/src/SelectField/BaseSelect.tsx   | 9 +++++++--
 .../bento-design-system/src/SelectField/SelectField.tsx  | 3 ++-
 packages/bento-design-system/src/SelectField/types.ts    | 1 +
 3 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/packages/bento-design-system/src/SelectField/BaseSelect.tsx b/packages/bento-design-system/src/SelectField/BaseSelect.tsx
index 4755fce1d..75b67328f 100644
--- a/packages/bento-design-system/src/SelectField/BaseSelect.tsx
+++ b/packages/bento-design-system/src/SelectField/BaseSelect.tsx
@@ -4,7 +4,7 @@ import { FieldProps } from "../Field/FieldProps";
 import { BentoConfigProvider, useBentoConfig } from "../BentoConfigContext";
 import { AriaLabelingProps, DOMProps } from "@react-types/shared";
 import * as selectComponents from "./components";
-import { useEffect, useRef } from "react";
+import { useEffect, useId, useRef } from "react";
 import { BaseMultiProps, BaseSelectProps, BaseSingleProps, SelectOption } from "./types";
 
 type MultiProps<A> = BaseMultiProps &
@@ -58,11 +58,16 @@ export function BaseSelect<A>(props: Props<A>) {
     clearable = true,
   } = props;
 
+  // NOTE(gabro): we want to make sure we have a stable ID across SSR rendering, to overcome this issue with react-select https://github.com/JedWatson/react-select/issues/2629
+  const generatedId = useId();
+  const id = fieldProps.id ?? generatedId;
+
   return (
     // NOTE(gabro): SelectField has its own config for List, so we override it here using BentoConfigProvider
     <BentoConfigProvider value={{ list: dropdownConfig.list }}>
       <Select
-        id={fieldProps.id}
+        id={id}
+        instanceId={id}
         name={name}
         aria-label={fieldProps["aria-label"]}
         aria-labelledby={fieldProps["aria-labelledby"]}
diff --git a/packages/bento-design-system/src/SelectField/SelectField.tsx b/packages/bento-design-system/src/SelectField/SelectField.tsx
index a51c8c7d4..96b036b29 100644
--- a/packages/bento-design-system/src/SelectField/SelectField.tsx
+++ b/packages/bento-design-system/src/SelectField/SelectField.tsx
@@ -28,10 +28,11 @@ declare module "react-select/dist/declarations/src/Select" {
 }
 
 export function SelectField<A>(props: Props<A>) {
-  const { label, hint, hintPlacement, assistiveText, issues, disabled } = props;
+  const { id, label, hint, hintPlacement, assistiveText, issues, disabled } = props;
 
   const validationState = issues ? "invalid" : "valid";
   const { labelProps, fieldProps, descriptionProps, errorMessageProps } = useField({
+    id,
     label,
     description: assistiveText,
     errorMessage: issues,
diff --git a/packages/bento-design-system/src/SelectField/types.ts b/packages/bento-design-system/src/SelectField/types.ts
index 3ba619145..e63964f32 100644
--- a/packages/bento-design-system/src/SelectField/types.ts
+++ b/packages/bento-design-system/src/SelectField/types.ts
@@ -32,6 +32,7 @@ export type BaseMultiProps = {
 );
 
 export type BaseSelectProps<A> = {
+  id?: string;
   menuSize?: ListSize;
   placeholder?: LocalizedString;
   options: Array<SelectOption<A>>;