Skip to content

Commit

Permalink
Merge pull request #2780 from edy/master
Browse files Browse the repository at this point in the history
Add an optional emptyValue to SelectInput
  • Loading branch information
fzaninotto authored Mar 8, 2019
2 parents 1356103 + e529326 commit adc653c
Show file tree
Hide file tree
Showing 3 changed files with 26 additions and 3 deletions.
4 changes: 2 additions & 2 deletions docs/Inputs.md
Original file line number Diff line number Diff line change
Expand Up @@ -993,10 +993,10 @@ const FullNameField = ({ record }) => <span>{record.first_name} {record.last_nam
<SelectInput source="gender" choices={choices} optionText={<FullNameField />}/>
```
Enabling the `allowEmpty` props adds an empty choice (with `null` value) on top of the options, and makes the value nullable:
Enabling the `allowEmpty` props adds an empty choice (with a default `null` value, which you can overwrite with the `emptyValue` prop) on top of the options, and makes the value nullable:
```jsx
<SelectInput source="category" allowEmpty choices={[
<SelectInput source="category" allowEmpty emptyValue="" choices={[
{ id: 'programming', name: 'Programming' },
{ id: 'lifestyle', name: 'Lifestyle' },
{ id: 'photography', name: 'Photography' },
Expand Down
5 changes: 4 additions & 1 deletion packages/ra-ui-materialui/src/input/SelectInput.js
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ import ResettableTextField from './ResettableTextField';
const sanitizeRestProps = ({
addLabel,
allowEmpty,
emptyValue,
basePath,
choices,
className,
Expand Down Expand Up @@ -155,7 +156,7 @@ export class SelectInput extends Component {

addAllowEmpty = choices => {
if (this.props.allowEmpty) {
return [<MenuItem value="" key="null" />, ...choices];
return [<MenuItem value={this.props.emptyValue} key="null" />, ...choices];
}

return choices;
Expand Down Expand Up @@ -240,6 +241,7 @@ export class SelectInput extends Component {

SelectInput.propTypes = {
allowEmpty: PropTypes.bool.isRequired,
emptyValue: PropTypes.any,
choices: PropTypes.arrayOf(PropTypes.object),
classes: PropTypes.object,
className: PropTypes.string,
Expand All @@ -263,6 +265,7 @@ SelectInput.propTypes = {

SelectInput.defaultProps = {
allowEmpty: false,
emptyValue: '',
classes: {},
choices: [],
options: {},
Expand Down
20 changes: 20 additions & 0 deletions packages/ra-ui-materialui/src/input/SelectInput.spec.js
Original file line number Diff line number Diff line change
Expand Up @@ -94,6 +94,26 @@ describe('<SelectInput />', () => {
assert.equal(MenuItemElement1.children().length, 0);
});

it('should add an empty menu with custom value when allowEmpty is true', () => {
const emptyValue = 'test';
const wrapper = shallow(
<SelectInput
allowEmpty
emptyValue={emptyValue}
{...defaultProps}
choices={[
{ id: 'M', name: 'Male' },
{ id: 'F', name: 'Female' },
]}
/>
);
const MenuItemElements = wrapper.find('WithStyles(MenuItem)');
assert.equal(MenuItemElements.length, 3);
const MenuItemElement1 = MenuItemElements.first();
assert.equal(MenuItemElement1.prop('value'), emptyValue);
assert.equal(MenuItemElement1.children().length, 0);
});

it('should not add a falsy (null or false) element when allowEmpty is false', () => {
const wrapper = shallow(
<SelectInput
Expand Down

0 comments on commit adc653c

Please sign in to comment.