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 = BaseMultiProps & @@ -58,11 +58,16 @@ export function BaseSelect(props: Props) { 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