diff --git a/docs/app/Examples/modules/Dropdown/Types/AllowAdditions.js b/docs/app/Examples/modules/Dropdown/Types/AllowAdditions.js index a14c68084b..30a562990f 100644 --- a/docs/app/Examples/modules/Dropdown/Types/AllowAdditions.js +++ b/docs/app/Examples/modules/Dropdown/Types/AllowAdditions.js @@ -12,23 +12,23 @@ const options = [ export default class AllowAdditionsExample extends Component { state = { optionsSingle: options, optionsMultiple: options } - handleAdditionSingle = value => { + handleAdditionSingle = (e, { value }) => { // validate, save to server, show a message to the user ... this.setState({ optionsSingle: [{ text: value, value }, ...this.state.optionsSingle], }) } - handleAdditionMultiple = value => { + handleAdditionMultiple = (e, { value }) => { // validate, save to server, show a message to the user ... this.setState({ optionsMultiple: [{ text: value, value }, ...this.state.optionsMultiple], }) } - handleChangeSingle = (e, value) => this.setState({ currentValue: value }) + handleChangeSingle = (e, { value }) => this.setState({ currentValue: value }) - handleChangeMultiple = (e, values) => this.setState({ currentValues: values }) + handleChangeMultiple = (e, { value }) => this.setState({ currentValues: value }) render() { const { currentValue, currentValues } = this.state diff --git a/src/modules/Dropdown/Dropdown.js b/src/modules/Dropdown/Dropdown.js index e696896b0d..72b331302d 100644 --- a/src/modules/Dropdown/Dropdown.js +++ b/src/modules/Dropdown/Dropdown.js @@ -116,9 +116,6 @@ export default class Dropdown extends Component { PropTypes.bool, ]), - /** Called with the new value added by the user. Use this to update the options list. */ - onAddItem: PropTypes.func, - /** Position of the `Add: ...` option in the dropdown list ('top' or 'bottom'). */ additionPosition: PropTypes.oneOf(_meta.props.additionPosition), @@ -141,6 +138,9 @@ export default class Dropdown extends Component { // Callbacks // ------------------------------------ + /** Called with the name and new value added by the user. Use this to update the options list. */ + onAddItem: PropTypes.func, + /** Called with the React Synthetic Event on Dropdown blur. */ onBlur: PropTypes.func, @@ -405,7 +405,7 @@ export default class Dropdown extends Component { selectHighlightedItem = (e) => { const { open } = this.state - const { multiple, onAddItem, options } = this.props + const { multiple, name, onAddItem, options } = this.props const value = _.get(this.getSelectedItem(), 'value') // prevent selecting null if there was no selected item value @@ -413,7 +413,9 @@ export default class Dropdown extends Component { if (!value || !open) return // notify the onAddItem prop if this is a new value - if (onAddItem && !_.some(options, { text: value })) onAddItem(value) + if (onAddItem && !_.some(options, { text: value })) { + onAddItem(e, { name, value }) + } // notify the onChange prop that the user is trying to change value if (multiple) { @@ -492,7 +494,7 @@ export default class Dropdown extends Component { handleItemClick = (e, value) => { debug('handleItemClick()') debug(value) - const { multiple, onAddItem, options } = this.props + const { multiple, name, onAddItem, options } = this.props const item = this.getItemByValue(value) || {} // prevent toggle() in handleClick() @@ -505,7 +507,9 @@ export default class Dropdown extends Component { if (item.disabled) return // notify the onAddItem prop if this is a new value - if (onAddItem && !_.some(options, { value })) onAddItem(value) + if (onAddItem && !_.some(options, { text: value })) { + onAddItem(e, { name, value }) + } // notify the onChange prop that the user is trying to change value if (multiple) { diff --git a/src/modules/Search/Search.js b/src/modules/Search/Search.js index 77e7387ac0..bd7113c9a2 100644 --- a/src/modules/Search/Search.js +++ b/src/modules/Search/Search.js @@ -243,8 +243,8 @@ export default class Search extends Component { // onChange needs to receive a value // can't rely on props.value if we are controlled - onChange = (e, result) => { - debug('onChange()') + handleChange = (e, result) => { + debug('handleChange()') debug(result) const { onChange } = this.props if (onChange) onChange(e, result) @@ -286,7 +286,7 @@ export default class Search extends Component { // notify the onChange prop that the user is trying to change value this.setValue(result.title) - this.onChange(e, result) + this.handleChange(e, result) this.close() } @@ -333,7 +333,7 @@ export default class Search extends Component { // notify the onChange prop that the user is trying to change value this.setValue(result.title) - this.onChange(e, result) + this.handleChange(e, result) this.close() } @@ -616,7 +616,7 @@ export default class Search extends Component { className={classes} onBlur={this.handleBlur} onFocus={this.handleFocus} - onChange={this.onChange} + onChange={this.handleChange} onMouseDown={this.handleMouseDown} > {this.renderSearchInput()} diff --git a/test/specs/modules/Dropdown/Dropdown-test.js b/test/specs/modules/Dropdown/Dropdown-test.js index 6d92f8bf09..627b40127c 100644 --- a/test/specs/modules/Dropdown/Dropdown-test.js +++ b/test/specs/modules/Dropdown/Dropdown-test.js @@ -1596,8 +1596,9 @@ describe('Dropdown Component', () => { it('calls onAddItem prop when clicking new value', () => { const spy = sandbox.spy() + const name = 'my-dropdown' const search = wrapperMount( - + ) .find('input.search') @@ -1609,13 +1610,14 @@ describe('Dropdown Component', () => { .simulate('click') spy.should.have.been.calledOnce() - spy.firstCall.args[0].should.equal('boo') + spy.should.have.been.calledWith(sandbox.match.any, { name, value: 'boo' }) }) it('calls onAddItem prop when pressing enter on new value', () => { const spy = sandbox.spy() + const name = 'my-dropdown' const search = wrapperMount( - + ) .find('input.search') @@ -1623,7 +1625,7 @@ describe('Dropdown Component', () => { domEvent.keyDown(document, { key: 'Enter' }) spy.should.have.been.calledOnce() - spy.firstCall.args[0].should.equal('boo') + spy.should.have.been.calledWith(sandbox.match.any, { name, value: 'boo' }) }) }) diff --git a/test/specs/modules/Search/Search-test.js b/test/specs/modules/Search/Search-test.js index ab23d284df..c4a6f90d14 100644 --- a/test/specs/modules/Search/Search-test.js +++ b/test/specs/modules/Search/Search-test.js @@ -540,7 +540,7 @@ describe('Search Component', () => { .simulate('click', nativeEvent) spy.should.have.been.calledOnce() - spy.firstCall.args[1].should.deep.equal(randomResult) + spy.should.have.been.calledWith(sandbox.match.any, randomResult) }) it('is called with event and value when pressing enter on a selected item', () => { const firstResult = options[0] @@ -553,7 +553,7 @@ describe('Search Component', () => { domEvent.keyDown(document, { key: 'Enter' }) spy.should.have.been.calledOnce() - spy.firstCall.args[1].should.deep.equal(firstResult) + spy.should.have.been.calledWith(sandbox.match.any, firstResult) }) it('is not called when updating the value prop', () => { const value = _.sample(options).title