Merge pull request #56 from ritz078/patrickW/feature--add-default-val…

…ue-prop [FEATURE] Add `isDropdown` and `inputProps` options
ritz078 · Oct 19, 2021 · 689f4d8 · 689f4d8
2 parents 83561e0 + 6511dd0
commit 689f4d8
Show file tree

Hide file tree

Showing 4 changed files with 62 additions and 3 deletions.
diff --git a/README.md b/README.md
@@ -69,8 +69,10 @@ attribute|default|description
 ---------|-------|-----------
 caseSensitive|false|Indicates whether comparisons should be case sensitive.
 className|null|give a custom class name to the root element
+inputProps|{}|Props passed directly to the input element. i.e. `defaultValue`, `onChange`, etc.
 inputStyle|{}|Styles passed directly to the `input` element.
 inputWrapperStyle|{}|Styles passed directly to the `input` wrapper `div`.
+isDropdown|false|Hide the result list on blur.
 listItemStyle|{}|Styles passed to each item in the dropdown list.
 listWrapperStyle|{}|Styles passed directly to the dropdown wrapper.
 selectedListItemStyle|{}|Styles passed directly to current 'active' item.

diff --git a/src/index.js b/src/index.js
@@ -70,6 +70,8 @@ export default class FuzzySearch extends Component {
     distance: PropTypes.number,
     id: PropTypes.string,
     include: PropTypes.array,
+    inputProps: PropTypes.object,
+    isDropdown: PropTypes.bool,
     maxPatternLength: PropTypes.number,
     onSelect: PropTypes.func.isRequired,
     width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
@@ -99,6 +101,8 @@ export default class FuzzySearch extends Component {
     caseSensitive: false,
     distance: 100,
     include: [],
+    inputProps: {},
+    isDropdown: false,
     keyForDisplayName: 'title',
     location: 0,
     width: 430,
@@ -127,7 +131,7 @@ export default class FuzzySearch extends Component {
       isOpen: !this.props.shouldShowDropdownAtStart,
       results: [],
       selectedIndex: 0,
-      value: '',
+      value: props.inputProps.defaultValue || '',
     };
     this.handleChange = this.handleChange.bind(this);
     this.handleKeyDown = this.handleKeyDown.bind(this);
@@ -173,9 +177,16 @@ export default class FuzzySearch extends Component {
   }
 
   handleChange(e) {
+    e.persist();
+
+    if (this.props.inputProps.onChange) {
+      this.props.inputProps.onChange(e);
+    }
+
     const shouldDisplayAllListItems = this.props.shouldShowDropdownAtStart && !e.target.value;
 
     this.setState({
+      isOpen: true,
       results: shouldDisplayAllListItems
         ? this.props.list
         : this.fuse.search(e.target.value).slice(0, this.props.maxResults - 1),
@@ -231,6 +242,8 @@ export default class FuzzySearch extends Component {
     const {
       autoFocus,
       className,
+      inputProps,
+      isDropdown,
       list,
       placeholder,
       resultsTemplate,
@@ -253,7 +266,8 @@ export default class FuzzySearch extends Component {
         onBlur={(e) => {
           if (this.dropdownRef.contains(e.relatedTarget)) return;
 
-          if (shouldShowDropdownAtStart) {
+          // Check shouldShowDropdownAtStart for backwards-compatibility.
+          if (isDropdown || shouldShowDropdownAtStart) {
             this.setState({
               isOpen: false,
             });
@@ -263,19 +277,24 @@ export default class FuzzySearch extends Component {
       >
         <div style={{...styles.searchBoxWrapper, ...this.props.inputWrapperStyle}}>
           <input
+            {...inputProps}
             autoFocus={autoFocus}
             onChange={this.handleChange}
             placeholder={placeholder}
             style={{...styles.searchBoxStyle, ...this.props.inputStyle}}
             type="text"
             value={this.state.value}
-            onFocus={() => {
+            onFocus={(e) => {
               if (shouldShowDropdownAtStart) {
                 this.setState({
                   isOpen: true,
                   results: this.state.value ? this.state.results : list,
                 });
               }
+
+              if(inputProps.onFocus) {
+                inputProps.onFocus(e)
+              }
             }}
           />
         </div>

diff --git a/src/stories/index.js b/src/stories/index.js
@@ -70,6 +70,15 @@ storiesOf('SearchBox', module)
   .add('Basic', () => (
     <FuzzySearch list={list} keys={['author', 'title']} width={430} onSelect={action('selected')} />
   ))
+  .add('Dropdown behavior', () => (
+    <FuzzySearch
+      isDropdown
+      list={list}
+      keys={['author', 'title']}
+      width={430}
+      onSelect={action('selected')}
+    />
+  ))
   .add('Custom Styles', () => (
     <FuzzySearch
       list={list}

diff --git a/src/tests/index.js b/src/tests/index.js
@@ -190,4 +190,33 @@ describe('<FuzzySearch />', () => {
 
     expect(wrapper.state('results').length).to.not.equal(0);
   });
+
+  it('with inputProps provided', () => {
+    const onChange = sinon.spy();
+    const wrapper = mount(
+      <FuzzySearch
+        list={list}
+        inputProps={{
+          defaultValue: 'Hello there!',
+          onChange,
+        }}
+        onSelect={onChange}
+        keys={['author', 'title']}
+        options={{ includeMatches: true }}
+        defaultValue="Hello there!"
+      />,
+    );
+
+    const input = wrapper.find('input');
+
+    expect(input.get(0).value).to.equal('Hello there!');
+
+    input.simulate('change', {
+      target: {
+        value: 't',
+      },
+    });
+
+    expect(onChange.calledOnce).to.equal(true);
+  });
 });