Permalink
Browse files

Merge pull request JedWatson#1347 from forum-is/master

Delete key removes an item when there is no input
  • Loading branch information...
JedWatson committed Nov 4, 2016
2 parents 9dd1d27 + 0465ea9 commit 77e6cc1c01edf42e1199068d87103b46c3d95992
Showing with 39 additions and 0 deletions.
  1. +1 −0 README.md
  2. +8 −0 src/Select.js
  3. +30 −0 test/Select-test.js
View
@@ -351,6 +351,7 @@ function onInputKeyDown(event) {
clearAllText | string | 'Clear all' | title for the "clear" control when `multi` is true
clearValueText | string | 'Clear value' | title for the "clear" control
resetValue | any | null | value to use when you clear the control
deleteRemoves | bool | true | whether pressing delete key removes the last item when there is no input value
delimiter | string | ',' | delimiter to use to join multiple values
disabled | bool | false | whether the Select is disabled or not
filterOption | func | undefined | method to filter a single option: `function(option, filterString)`
View
@@ -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
@@ -125,6 +126,7 @@ const Select = React.createClass({
clearable: true,
clearAllText: 'Clear all',
clearValueText: 'Clear value',
deleteRemoves: true,
delimiter: ',',
disabled: false,
escapeClearsValue: true,
@@ -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();
View
@@ -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' });
};
@@ -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']);

0 comments on commit 77e6cc1

Please sign in to comment.