diff --git a/README.md b/README.md index 2cf1e97..27a9561 100644 --- a/README.md +++ b/README.md @@ -48,7 +48,6 @@ const handleBlur = (fieldName, value) => { | isClearable | ``false`` | ``false`` | Renders a button that unsets the selected value if set to true. | | isDisabled | ``false`` | ``false`` | If true, the component is disabled. | | menuWidth | ``false`` | ``undefined`` | A number that manually sets the width of the menu. | -| minTypedCharacters | ``false`` | ``undefined`` | DEPRECATED. If set, at least ``minTypedCharacters`` must be typed before the menu is rendered. | | notFoundLabel | ``false`` | ``nicht gefunden`` (German) | A string that is displayed after the typed label for which no options could be found. | | onBlur | ``false`` | no op | A callback that is called when focus is lost. Parameters: ``fieldName``, ``value``. | | onChange | ``false`` | no op | A callback that is called when the value has changed. Parameters: ``fieldName``, ``value``. | diff --git a/src/Typeahead.jsx b/src/Typeahead.jsx index 0477a7a..f6c7d61 100644 --- a/src/Typeahead.jsx +++ b/src/Typeahead.jsx @@ -68,7 +68,6 @@ type Props = { isClearable: boolean, isDisabled: boolean, menuWidth: Optional, - minTypedCharacters?: number, notFoundLabel: string, onBlur: Function, onChange: Function, @@ -118,7 +117,6 @@ export default class Typeahead extends PureComponent { isClearable: PropTypes.bool, isDisabled: PropTypes.bool, menuWidth: PropTypes.number, - minTypedCharacters: PropTypes.number, notFoundLabel: PropTypes.string, onBlur: PropTypes.func, onChange: PropTypes.func, @@ -175,12 +173,10 @@ export default class Typeahead extends PureComponent { _handleInputBlur = (): void => { if (!this.isMouseDown) { - this._clearIfNecessary(() => { - const previousValue = this.state.value; - this._updateValue(() => { - this._afterValueChanged(previousValue)(); - this._fireOnBlur(); - }); + const previousValue = this.state.value; + this._updateValue(() => { + this._afterValueChanged(previousValue)(); + this._fireOnBlur(); }); } }; @@ -199,7 +195,6 @@ export default class Typeahead extends PureComponent { } this._openIfPossible(); - this._closeIfNecessary(); }); }; @@ -253,41 +248,21 @@ export default class Typeahead extends PureComponent { _openIfPossible = (): void => { if (!this.state.isOpen) { - this.setState((state, props) => ({ - isOpen: props.minTypedCharacters ? props.minTypedCharacters <= state.typedLabel.length : true, + this.setState({ + isOpen: true, highlightedIndex: this._getHighlightedIndexByTypedLabel() - })); - } - }; - - _closeIfNecessary = (): void => { - const minTypedCharacters = this.props.minTypedCharacters; - if (minTypedCharacters) { - this.setState(state => ({ - isOpen: minTypedCharacters <= state.typedLabel.length - })); - } - }; - - _clearIfNecessary = (afterClear: Function): void => { - if (this.props.minTypedCharacters && this.props.minTypedCharacters > this.state.typedLabel.length) { - this._updateValue(afterClear); - } else { - afterClear(); + }); } }; _getHighlightedIndexByTypedLabel = (): number | typeof undefined => { - if (this.props.minTypedCharacters && this.props.minTypedCharacters > this.state.typedLabel.length) { - return NOTHING_HIGHLIGHTED; - } const optionIndex = this._getFilteredOptions().findIndex(this._byTypedLabel); const typedLabelFoundInOptions = optionIndex !== -1; return typedLabelFoundInOptions ? optionIndex : NOTHING_HIGHLIGHTED; }; _updateValue = (afterValueUpdated: Function): void => { - const shouldUpdateValue = this.state.isOpen || this.props.minTypedCharacters; + const shouldUpdateValue = this.state.isOpen; if (shouldUpdateValue) { const previousValue = this.state.value; const valueOfHighlightedOption = this._getValueOfHighlightedOption(); @@ -419,11 +394,6 @@ export default class Typeahead extends PureComponent { if (optionWithMissingGroupExists) { throw new Error('There is at least one option with an unknown group.'); } - - if (typeof props.minTypedCharacters !== 'undefined') { - console.warn('The prop minTypedCharacters is deprecated. It will be ignored in future versions.' + - 'Fortunately, performance is guaranteed due to virtualized lists.'); - } }; static getDerivedStateFromProps(props: Props, prevState: State): ?$Shape { @@ -680,7 +650,8 @@ export default class Typeahead extends PureComponent { {({width}) => ( width ? menuWidth : width - AUTO_SIZER_PADDING} + width={typeof menuWidth === 'number' && menuWidth > width ? menuWidth : width - + AUTO_SIZER_PADDING} rowCount={rows.length} noRowsRenderer={this._noRowsRenderer} rowHeight={calculateRowHeight} diff --git a/src/Typeahead.spec.jsx b/src/Typeahead.spec.jsx index e5a9c07..cb41d72 100644 --- a/src/Typeahead.spec.jsx +++ b/src/Typeahead.spec.jsx @@ -127,106 +127,6 @@ describe('Typeahead should', () => { expect(wrapper.state('isOpen')).toBe(true); }); - it('only open menu on focus enter when minimum typed characters have been typed', () => { - const wrapper = mount(); - - wrapper.find('input').simulate('focus'); - expect(wrapper.state('isOpen')).toBe(false); - - simulateKeys(wrapper, 'v'); - wrapper.find('input').simulate('focus'); - wrapper.update(); - expect(wrapper.state('isOpen')).toBe(false); - - simulateKeys(wrapper, 'va'); - wrapper.find('input').simulate('focus'); - wrapper.update(); - expect(wrapper.state('isOpen')).toBe(false); - - simulateKeys(wrapper, 'val'); - wrapper.find('input').simulate('focus'); - wrapper.update(); - expect(wrapper.state('isOpen')).toBe(true); - }); - - it('only open menu on any key down when minimum typed characters have been typed', () => { - const wrapper = mount(); - - wrapper.find('input').simulate('keyDown', {which: 'a'}); - wrapper.update(); - expect(wrapper.state('isOpen')).toBe(false); - - simulateKeys(wrapper, 'v'); - wrapper.update(); - expect(wrapper.state('isOpen')).toBe(false); - - simulateKeys(wrapper, 'va'); - wrapper.update(); - expect(wrapper.state('isOpen')).toBe(false); - - simulateKeys(wrapper, 'val'); - wrapper.update(); - expect(wrapper.state('isOpen')).toBe(true); - }); - - it('only open menu on arrow key down when minimum typed characters have been typed', () => { - const wrapper = mount(); - - wrapper.find('input').simulate('keyDown', {keyCode: KEY_DOWN}); - wrapper.update(); - expect(wrapper.state('isOpen')).toBe(false); - - simulateKeys(wrapper, 'l'); - wrapper.find('input').simulate('keyDown', {keyCode: KEY_DOWN}); - wrapper.update(); - expect(wrapper.state('isOpen')).toBe(false); - - simulateKeys(wrapper, 'la'); - wrapper.find('input').simulate('keyDown', {keyCode: KEY_DOWN}); - wrapper.update(); - expect(wrapper.state('isOpen')).toBe(false); - - simulateKeys(wrapper, 'lab'); - wrapper.find('input').simulate('keyDown', {keyCode: KEY_DOWN}); - wrapper.update(); - expect(wrapper.state('isOpen')).toBe(true); - }); - - it('close menu when minimum typed characters have not been typed', () => { - const wrapper = mount(); - wrapper.find('input').simulate('focus'); - - simulateKeys(wrapper, 'labe'); - wrapper.update(); - expect(wrapper.state('isOpen')).toBe(true); - - simulateKeys(wrapper, 'la'); - wrapper.update(); - expect(wrapper.state('isOpen')).toBe(false); - }); - - it('reset value to previously selected value when minimum typed characters have not been typed', () => { - const wrapper = mount(); - wrapper.find('input').simulate('focus'); - - simulateKeys(wrapper, 'label'); - wrapper.find('input').simulate('blur'); - expect(wrapper.state('value')).toBe('value1'); - - simulateKeys(wrapper, 'la'); - wrapper.find('input').simulate('blur'); - expect(wrapper.state('value')).toBe('value1'); - }); - - it('clear value when minimum typed characters have not been typed', () => { - const wrapper = mount(); - wrapper.find('input').simulate('focus'); - - simulateKeys(wrapper, 'la'); - wrapper.find('input').simulate('blur'); - expect(wrapper.state('value')).toBe(undefined); - }); - it('close menu on focus lost', () => { const wrapper = mount(); wrapper.find('input').simulate('focus');