Skip to content

Commit

Permalink
Merge pull request #859 from buildo/select-ssr
Browse files Browse the repository at this point in the history
  • Loading branch information
gabro authored Jun 26, 2024
2 parents 9455f6d + c7e1b32 commit 385e076
Show file tree
Hide file tree
Showing 3 changed files with 10 additions and 3 deletions.
9 changes: 7 additions & 2 deletions packages/bento-design-system/src/SelectField/BaseSelect.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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 &
Expand Down Expand Up @@ -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"]}
Expand Down
3 changes: 2 additions & 1 deletion packages/bento-design-system/src/SelectField/SelectField.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
1 change: 1 addition & 0 deletions packages/bento-design-system/src/SelectField/types.ts
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,7 @@ export type BaseMultiProps = {
);

export type BaseSelectProps<A> = {
id?: string;
menuSize?: ListSize;
placeholder?: LocalizedString;
options: Array<SelectOption<A>>;
Expand Down

0 comments on commit 385e076

Please sign in to comment.