fix(Search): merge nested shorthand props for the <input> element (#3785)

* Add failing test

* fix(Search): merge nested shorthand props for <input> element

* Update test/specs/modules/Search/Search-test.js

* Update src/modules/Search/Search.js

* Update src/modules/Search/Search.js

* Update src/modules/Search/Search.js

* Update src/modules/Search/Search.js

* Update src/modules/Search/Search.js

* Update src/modules/Search/Search.js

* Update src/modules/Search/Search.js

* Update src/modules/Search/Search.js

* Update src/modules/Search/Search.js

* Update src/modules/Search/Search.js

* Update test/specs/modules/Search/Search-test.js

* restore a test

Co-authored-by: Oleksandr Fediashov <alexander.mcgarret@gmail.com>

Author: noinkling

src/modules/Search/Search.js

@@ -27,6 +27,19 @@ import SearchResults from './SearchResults'
 
 const debug = makeDebugger('search')
 
+const overrideSearchInputProps = (predefinedProps) => {
+  const { input } = predefinedProps
+
+  if (_.isUndefined(input)) {
+    return { ...predefinedProps, input: { className: 'prompt' } }
+  }
+  if (_.isPlainObject(input)) {
+    return { ...predefinedProps, input: { ...input, className: cx(input.className, 'prompt') } }
+  }
+
+  return predefinedProps
+}
+
 /**
  * A search module allows a user to query for results from a selection of data
  */
@@ -530,12 +543,15 @@ export default class Search extends Component {
       autoGenerateKey: false,
       defaultProps: {
         ...rest,
+        autoComplete: 'off',
         icon,
-        input: { className: 'prompt', tabIndex: '0', autoComplete: 'off' },
         onChange: this.handleSearchChange,
         onClick: this.handleInputClick,
+        tabIndex: '0',
         value,
       },
+      // Nested shorthand props need special treatment to survive the shallow merge
+      overrideProps: overrideSearchInputProps,
     })
   }
 

test/specs/modules/Search/Search-test.js

@@ -774,6 +774,25 @@ describe('Search', () => {
     })
   })
 
+  describe('input', () => {
+    it(`merges nested shorthand props for the <input>`, () => {
+      wrapperMount(<Search input={{ input: { className: 'foo', tabIndex: '-1' } }} />)
+      const input = wrapper.find('input')
+
+      input.should.have.prop('tabIndex', '-1')
+      input.should.have.className('foo')
+      input.should.have.className('prompt')
+    })
+
+    it(`will not merge for a function`, () => {
+      wrapperMount(<Search input={{ input: (Component, props) => <Component {...props} /> }} />)
+      const input = wrapper.find('input')
+
+      input.should.have.prop('autoComplete', 'off')
+      input.should.have.not.className('prompt')
+    })
+  })
+
   describe('input props', () => {
     // Search handles some of html props
     const props = _.without(htmlInputAttrs, 'defaultValue', 'type')