diff --git a/README.md b/README.md index a95398b..d1d8306 100644 --- 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 index 8de5dd7..707d5d6 100644 --- 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 { >
{ + onFocus={(e) => { if (shouldShowDropdownAtStart) { this.setState({ isOpen: true, results: this.state.value ? this.state.results : list, }); } + + if(inputProps.onFocus) { + inputProps.onFocus(e) + } }} />
diff --git a/src/stories/index.js b/src/stories/index.js index 5995ea5..8b2e4b1 100644 --- a/src/stories/index.js +++ b/src/stories/index.js @@ -70,6 +70,15 @@ storiesOf('SearchBox', module) .add('Basic', () => ( )) + .add('Dropdown behavior', () => ( + + )) .add('Custom Styles', () => ( ', () => { expect(wrapper.state('results').length).to.not.equal(0); }); + + it('with inputProps provided', () => { + const onChange = sinon.spy(); + const wrapper = mount( + , + ); + + 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); + }); });