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