fix(Dropdown): override onChange in DropdownSearchInput (#3123)

fix(Dropdown): override onChange in DropdownSearchInput
Semantic-Org · Sep 4, 2018 · ac7cd79 · ac7cd79
1 parent 1ae2781
commit ac7cd79
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 1 deletion.
diff --git a/src/modules/Dropdown/Dropdown.js b/src/modules/Dropdown/Dropdown.js
@@ -1066,6 +1066,13 @@ export default class Dropdown extends Component {
     return _.isNil(tabIndex) ? 0 : tabIndex
   }
 
+  handleSearchInputOverrides = predefinedProps => ({
+    onChange: (e, inputProps) => {
+      _.invoke(predefinedProps, 'onChange', e, inputProps)
+      this.handleSearchChange(e, inputProps)
+    },
+  })
+
   // ----------------------------------------
   // Behavior
   // ----------------------------------------
@@ -1195,11 +1202,11 @@ export default class Dropdown extends Component {
     return DropdownSearchInput.create(searchInput, {
       defaultProps: {
         inputRef: this.handleSearchRef,
-        onChange: this.handleSearchChange,
         style: { width: this.computeSearchInputWidth() },
         tabIndex: this.computeSearchInputTabIndex(),
         value: searchQuery,
       },
+      overrideProps: this.handleSearchInputOverrides,
     })
   }
 

diff --git a/test/specs/modules/Dropdown/Dropdown-test.js b/test/specs/modules/Dropdown/Dropdown-test.js
@@ -2029,6 +2029,33 @@ describe('Dropdown', () => {
     })
   })
 
+  describe('searchInput', () => {
+    it('overrides onChange handler', () => {
+      const onInputChange = sandbox.spy()
+      const onSearchChange = sandbox.spy()
+
+      wrapperShallow(
+        <Dropdown
+          onSearchChange={onSearchChange}
+          options={options}
+          search
+          searchInput={{ onChange: onInputChange }}
+        />,
+      )
+
+      wrapper
+        .find(DropdownSearchInput)
+        .shallow()
+        .simulate('change', {
+          stopPropagation: _.noop,
+          target: { value: faker.hacker.noun() },
+        })
+
+      onInputChange.should.have.been.calledOnce()
+      onSearchChange.should.have.been.calledOnce()
+    })
+  })
+
   describe('no results message', () => {
     it('is shown when a search yields no results', () => {
       const search = wrapperMount(<Dropdown options={options} selection search />).find(