diff --git a/src/modules/Dropdown/Dropdown.js b/src/modules/Dropdown/Dropdown.js
index 6645780d87..cc64823c14 100644
--- a/src/modules/Dropdown/Dropdown.js
+++ b/src/modules/Dropdown/Dropdown.js
@@ -579,7 +579,7 @@ export default class Dropdown extends Component {
 
   makeSelectedItemActive = (e) => {
     const { open } = this.state
-    const { multiple, onAddItem } = this.props
+    const { multiple } = this.props
 
     const item = this.getSelectedItem()
     const value = _.get(item, 'value')
@@ -588,9 +588,6 @@ export default class Dropdown extends Component {
     // prevent selecting duplicate items when the dropdown is closed
     if (_.isNil(value) || !open) return
 
-    // notify the onAddItem prop if this is a new value
-    if (onAddItem && item['data-additional']) onAddItem(e, { ...this.props, value })
-
     // state value may be undefined
     const newValue = multiple ? _.union(this.state.value, [value]) : value
 
@@ -598,11 +595,15 @@ export default class Dropdown extends Component {
     this.setValue(newValue)
     this.setSelectedIndex(newValue)
     this.handleChange(e, newValue)
+
+    // Heads up! This event handler should be called after `onChange`
+    // Notify the onAddItem prop if this is a new value
+    if (item['data-additional']) _.invoke(this.props, 'onAddItem', e, { ...this.props, value })
   }
 
   selectItemOnEnter = (e) => {
     debug('selectItemOnEnter()', keyboardKey.getName(e))
-    const { onAddItem, search } = this.props
+    const { search } = this.props
 
     if (keyboardKey.getCode(e) !== keyboardKey.Enter) return
     e.preventDefault()
@@ -611,7 +612,7 @@ export default class Dropdown extends Component {
     if (search && optionSize === 0) return
 
     const item = this.getSelectedItem()
-    const isAdditionItem = onAddItem && item['data-additional']
+    const isAdditionItem = item['data-additional']
 
     this.makeSelectedItemActive(e)
     this.closeOnChange(e)
@@ -700,7 +701,7 @@ export default class Dropdown extends Component {
   handleItemClick = (e, item) => {
     debug('handleItemClick()', item)
 
-    const { multiple, onAddItem, search } = this.props
+    const { multiple, search } = this.props
     const { value } = item
 
     // prevent toggle() in handleClick()
@@ -709,10 +710,7 @@ export default class Dropdown extends Component {
     if (multiple || item.disabled) e.nativeEvent.stopImmediatePropagation()
     if (item.disabled) return
 
-    // notify the onAddItem prop if this is a new value
-    const isAdditionItem = onAddItem && item['data-additional']
-    if (isAdditionItem) onAddItem(e, { ...this.props, value })
-
+    const isAdditionItem = item['data-additional']
     const newValue = multiple ? _.union(this.state.value, [value]) : value
 
     // notify the onChange prop that the user is trying to change value
@@ -725,6 +723,10 @@ export default class Dropdown extends Component {
     this.handleChange(e, newValue)
     this.closeOnChange(e)
 
+    // Heads up! This event handler should be called after `onChange`
+    // Notify the onAddItem prop if this is a new value
+    if (isAdditionItem) _.invoke(this.props, 'onAddItem', e, { ...this.props, value })
+
     if (multiple && search && this.searchRef) this.searchRef.focus()
   }
 
diff --git a/test/specs/modules/Dropdown/Dropdown-test.js b/test/specs/modules/Dropdown/Dropdown-test.js
index a44aa4d04f..83cc5d53f9 100644
--- a/test/specs/modules/Dropdown/Dropdown-test.js
+++ b/test/specs/modules/Dropdown/Dropdown-test.js
@@ -2291,9 +2291,17 @@ describe('Dropdown', () => {
     })
 
     it('calls onAddItem prop when clicking new value', () => {
-      const spy = sandbox.spy()
+      const onAddItem = sandbox.spy()
+      const onChange = sandbox.spy()
       const search = wrapperMount(
-        <Dropdown options={customOptions} selection search allowAdditions onAddItem={spy} />,
+        <Dropdown
+          allowAdditions
+          onAddItem={onAddItem}
+          onChange={onChange}
+          options={customOptions}
+          search
+          selection
+        />,
       )
         .find('input.search')
 
@@ -2304,22 +2312,34 @@ describe('Dropdown', () => {
         .first()
         .simulate('click')
 
-      spy.should.have.been.calledOnce()
-      spy.should.have.been.calledWithMatch({}, { value: 'boo' })
+      onChange.should.have.been.calledOnce()
+      onAddItem.should.have.been.calledOnce()
+      onAddItem.should.have.been.calledWithMatch({}, { value: 'boo' })
+      onAddItem.should.have.been.calledImmediatelyAfter(onChange)
     })
 
     it('calls onAddItem prop when pressing enter on new value', () => {
-      const spy = sandbox.spy()
+      const onAddItem = sandbox.spy()
+      const onChange = sandbox.spy()
       const search = wrapperMount(
-        <Dropdown options={customOptions} selection search allowAdditions onAddItem={spy} />,
+        <Dropdown
+          allowAdditions
+          onAddItem={onAddItem}
+          onChange={onChange}
+          options={customOptions}
+          search
+          selection
+        />,
       )
         .find('input.search')
 
       search.simulate('change', { target: { value: 'boo' } })
       domEvent.keyDown(document, { key: 'Enter' })
 
-      spy.should.have.been.calledOnce()
-      spy.should.have.been.calledWithMatch({}, { value: 'boo' })
+      onChange.should.have.been.calledOnce()
+      onAddItem.should.have.been.calledOnce()
+      onAddItem.should.have.been.calledWithMatch({}, { value: 'boo' })
+      onAddItem.should.have.been.calledImmediatelyAfter(onChange)
     })
 
     it('clears value of the searchQuery when selection is only option', () => {