Skip to content

Commit 3132d35

Browse files
authored
feat: allow clear select value (#735)
1 parent 5512022 commit 3132d35

File tree

8 files changed

+14
-1
lines changed

8 files changed

+14
-1
lines changed

demo/collections/Select.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ const Select: CollectionConfig = {
2222
}],
2323
label: 'Select From',
2424
required: true,
25+
isClearable: true,
2526
},
2627
{
2728
name: 'selectHasMany',

docs/fields/select.mdx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ keywords: select, multi-select, fields, config, configuration, documentation, Co
1919
| **`hasMany`** | Boolean when, if set to `true`, allows this field to have many selections instead of only one. |
2020
| **`label`** | Used as a field label in the Admin panel and to name the generated GraphQL type. |
2121
| **`unique`** | Enforce that each entry in the Collection has a unique value for this field. |
22+
| **`isClearable`** | Whether select can be cleared. |
2223
| **`validate`** | Provide a custom validation function that will be executed on both the Admin panel and the backend. [More](/docs/fields/overview#validation) |
2324
| **`index`** | Build a [MongoDB index](https://docs.mongodb.com/manual/indexes/) for this field to produce faster queries. Set this field to `true` if your users will perform queries on this field's data often. |
2425
| **`saveToJWT`** | If this field is top-level and nested in a config supporting [Authentication](/docs/authentication/config), include its data in the user JWT. |

src/admin/components/elements/ReactSelect/index.tsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ const ReactSelect: React.FC<Props> = (props) => {
1515
disabled = false,
1616
placeholder,
1717
isSearchable = true,
18+
isClearable,
1819
} = props;
1920

2021
const classes = [
@@ -35,6 +36,7 @@ const ReactSelect: React.FC<Props> = (props) => {
3536
classNamePrefix="rs"
3637
options={options}
3738
isSearchable={isSearchable}
39+
isClearable={isClearable}
3840
/>
3941
);
4042
};

src/admin/components/elements/ReactSelect/types.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,4 +21,5 @@ export type Props = {
2121
onMenuScrollToBottom?: () => void
2222
placeholder?: string
2323
isSearchable?: boolean
24+
isClearable?: boolean
2425
}

src/admin/components/forms/field-types/Select/Input.tsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,7 @@ const SelectInput: React.FC<SelectInputProps> = (props) => {
4242
width,
4343
options,
4444
hasMany,
45+
isClearable,
4546
} = props;
4647

4748
const classes = [
@@ -84,6 +85,7 @@ const SelectInput: React.FC<SelectInputProps> = (props) => {
8485
isDisabled={readOnly}
8586
options={options}
8687
isMulti={hasMany}
88+
isClearable={isClearable}
8789
/>
8890
<FieldDescription
8991
value={value}

src/admin/components/forms/field-types/Select/index.tsx

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,7 @@ const Select: React.FC<Props> = (props) => {
3434
description,
3535
condition,
3636
} = {},
37+
isClearable,
3738
} = props;
3839

3940
const path = pathFromProps || name;
@@ -62,7 +63,9 @@ const Select: React.FC<Props> = (props) => {
6263
const onChange = useCallback((selectedOption) => {
6364
if (!readOnly) {
6465
let newValue;
65-
if (hasMany) {
66+
if (!selectedOption) {
67+
newValue = undefined;
68+
} else if (hasMany) {
6669
if (Array.isArray(selectedOption)) {
6770
newValue = selectedOption.map((option) => option.value);
6871
} else {
@@ -96,6 +99,7 @@ const Select: React.FC<Props> = (props) => {
9699
className={className}
97100
width={width}
98101
hasMany={hasMany}
102+
isClearable={isClearable}
99103
/>
100104
);
101105
};

src/fields/config/schema.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -144,6 +144,7 @@ export const select = baseField.keys({
144144
joi.array().items(joi.string().allow('')),
145145
joi.func(),
146146
),
147+
isClearable: joi.boolean().default(false),
147148
});
148149

149150
export const radio = baseField.keys({

src/fields/config/types.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -214,6 +214,7 @@ export type SelectField = FieldBase & {
214214
type: 'select'
215215
options: Option[]
216216
hasMany?: boolean
217+
isClearable?: boolean;
217218
}
218219

219220
export type RelationshipField = FieldBase & {

0 commit comments

Comments
 (0)