diff --git a/package.json b/package.json index ce86e72..eee71e6 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-datalist-input", - "version": "1.1.23", + "version": "1.1.26", "description": "This package provides a react component as follows: an input field with a drop down menu to pick a possible option based on the current input.", "main": "./lib/DataListInput.js", "license": "MIT", diff --git a/src/DataListInput.css b/src/DataListInput.css index 398f27c..c5b017d 100644 --- a/src/DataListInput.css +++ b/src/DataListInput.css @@ -10,6 +10,7 @@ background-color: #f1f1f1; width: 100%; height: 100%; + word-wrap: break-word; } .datalist-items { diff --git a/src/DataListInput.jsx b/src/DataListInput.jsx index 44129f0..10cfc5b 100644 --- a/src/DataListInput.jsx +++ b/src/DataListInput.jsx @@ -63,16 +63,23 @@ class DataListInput extends React.Component { const { currentInput, visible, lastValidItem } = this.state; const { requiredInputLength, dropDownLength, items, match, clearInputOnSelect } = this.props; const reachedRequiredLength = currentInput.length >= requiredInputLength; + if ( reachedRequiredLength && !visible ) { + const matchingItems = items.filter( ( item ) => { if ( typeof ( match ) === typeof ( Function ) ) { return match( currentInput, item ); } return this.match( currentInput, item ); } ); - const displayableItems = matchingItems.length - ? matchingItems : items.slice( 0, dropDownLength ) + + const currentInputIsLastItem = + !clearInputOnSelect && lastValidItem && lastValidItem.label === currentInput; + const displayableItems = matchingItems.length && !currentInputIsLastItem + ? matchingItems : items.slice( 0, dropDownLength ); + let index = lastValidItem && !clearInputOnSelect ? this.indexOfItem( lastValidItem, displayableItems ) : 0; index = index > 0 ? index : 0; + this.setState( { visible: true, matchingItems: displayableItems, focusIndex: index, } ); } }