Pass event and name to onAddItem

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

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,15 +405,17 @@ 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
     // prevent selecting duplicate items when the dropdown is closed
     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) {

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()}

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(
-        <Dropdown options={customOptions} selection search allowAdditions onAddItem={spy} />
+        <Dropdown options={customOptions} selection search allowAdditions onAddItem={spy} name={name} />
       )
         .find('input.search')
 
@@ -1609,21 +1610,22 @@ 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(
-        <Dropdown options={customOptions} selection search allowAdditions onAddItem={spy} />
+        <Dropdown options={customOptions} selection search allowAdditions onAddItem={spy} name={name} />
       )
         .find('input.search')
 
       search.simulate('change', { target: { value: 'boo' } })
       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' })
     })
   })
 

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