Skip to content

Commit

Permalink
Delete key removes an item when there is no input
Browse files Browse the repository at this point in the history
  • Loading branch information
Sebastian Uecker committed Nov 3, 2016
1 parent 9dd1d27 commit 1d9b8a0
Show file tree
Hide file tree
Showing 2 changed files with 38 additions and 0 deletions.
8 changes: 8 additions & 0 deletions src/Select.js
Original file line number Diff line number Diff line change
Expand Up @@ -57,6 +57,7 @@ const Select = React.createClass({
clearAllText: stringOrNode, // title for the "clear" control when multi: true
clearValueText: stringOrNode, // title for the "clear" control
clearable: React.PropTypes.bool, // should it be possible to reset value
deleteRemoves: React.PropTypes.bool, // whether backspace removes an item if there is no text input
delimiter: React.PropTypes.string, // delimiter to use to join multiple values for the hidden field value
disabled: React.PropTypes.bool, // whether the Select is disabled or not
escapeClearsValue: React.PropTypes.bool, // whether escape clears the value when the menu is closed
Expand Down Expand Up @@ -125,6 +126,7 @@ const Select = React.createClass({
clearable: true,
clearAllText: 'Clear all',
clearValueText: 'Clear value',
deleteRemoves: true,
delimiter: ',',
disabled: false,
escapeClearsValue: true,
Expand Down Expand Up @@ -520,6 +522,12 @@ const Select = React.createClass({
}
this.focusStartOption();
break;
case 46: // backspace
if (!this.state.inputValue && this.props.deleteRemoves) {
event.preventDefault();
this.popValue();
}
return;
default: return;
}
event.preventDefault();
Expand Down
30 changes: 30 additions & 0 deletions test/Select-test.js
Original file line number Diff line number Diff line change
Expand Up @@ -84,6 +84,10 @@ describe('Select', () => {
TestUtils.Simulate.keyDown(searchInputNode, { keyCode: 8, key: 'Backspace' });
};

var pressDelete = () => {
TestUtils.Simulate.keyDown(searchInputNode, { keyCode: 46, key: 'Backspace' });
};

var pressUp = () => {
TestUtils.Simulate.keyDown(getSelectControl(instance), { keyCode: 38, key: 'ArrowUp' });
};
Expand Down Expand Up @@ -1796,6 +1800,32 @@ describe('Select', () => {
</span>);
});

it('removes the last selected option with delete', () => {

setValueProp(['four','three']);
onChange.reset(); // Ignore previous onChange calls
pressDelete();
expect(onChange, 'was called with', [{ label: 'Four', value: 'four' }]);
});

it('does not remove the last selected option with delete when deleteRemoves=false', () => {

// Disable delete
wrapper.setPropsForChild({
deleteRemoves: false,
value: ['four', 'three']
});
onChange.reset(); // Ignore previous onChange calls

pressDelete();
expect(onChange, 'was not called');
expect(instance, 'to contain',
<span className="Select-multi-value-wrapper">
<div><span className="Select-value-label">Four</span></div>
<div><span className="Select-value-label">Three</span></div>
</span>);
});

it('removes an item when clicking on the X', () => {

setValueProp(['four', 'three', 'two']);
Expand Down

0 comments on commit 1d9b8a0

Please sign in to comment.