Skip to content

Commit

Permalink
Merge pull request #822 from buildo/fix-807
Browse files Browse the repository at this point in the history
  • Loading branch information
gabro authored Dec 14, 2023
2 parents 8c7c987 + 22fbf93 commit 9b1b545
Show file tree
Hide file tree
Showing 3 changed files with 30 additions and 1 deletion.
7 changes: 6 additions & 1 deletion packages/bento-design-system/src/SelectField/BaseSelect.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -55,6 +55,7 @@ export function BaseSelect<A>(props: Props<A>) {
autoFocus,
menuSize = dropdownConfig.defaultMenuSize,
searchable,
clearable = true,
} = props;

return (
Expand All @@ -79,7 +80,11 @@ export function BaseSelect<A>(props: Props<A>) {
onChange(multiValue.map((a) => a.value));
} else {
const singleValue = o as SingleValueT<SelectOption<A>>;
onChange(singleValue == null ? undefined : singleValue.value);
if (clearable) {
onChange(singleValue == null ? undefined : singleValue.value);
} else {
singleValue != null && onChange(singleValue.value);
}
}
}}
onBlur={onBlur}
Expand Down
2 changes: 2 additions & 0 deletions packages/bento-design-system/src/SelectField/types.ts
Original file line number Diff line number Diff line change
Expand Up @@ -11,13 +11,15 @@ export type SelectOption<A> = Omit<

export type BaseSingleProps = {
isMulti?: false;
clearable?: boolean;
};

export type BaseMultiProps = {
isMulti: true;
showMultiSelectBulkActions?: boolean;
selectAllButtonLabel?: LocalizedString;
clearAllButtonLabel?: LocalizedString;
clearable?: never;
} & (
| {
multiSelectMode?: "summary";
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,9 @@ import {
SelectField,
BentoConfigProvider,
SelectFieldProps,
SelectOption,
} from "..";
import { useState } from "react";

const meta = {
component: SelectField,
Expand Down Expand Up @@ -191,3 +193,23 @@ export const CustomListConfig = {
),
],
} satisfies Story;

// NOTE(gabro): using a render function instead of just args, because the `value/onChange` trick we
// use to make the story controlled doesn't play well with the implementation of `clearable`
export const NotClearable = {
args: {
clearable: false,
},
render: (args) => {
const [value, onChange] = useState<number | undefined>(undefined);
return (
<SelectField
label={args.label}
clearable={args.clearable}
options={args.options as SelectOption<number>[]}
value={value}
onChange={onChange}
/>
);
},
} satisfies Story;

0 comments on commit 9b1b545

Please sign in to comment.