danog/react-datalist-input
1
0
Fork 0
mirror of https://github.com/danog/react-datalist-input.git synced 2024-12-04 02:17:50 +01:00
Code Issues Projects Releases Wiki Activity

logical bug fixing

Browse Source
This commit is contained in:
Andre Landgraf 2019-06-13 23:40:25 +02:00
parent 1f410009bc
commit 0e4e12eb05
3 changed files with 11 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "react-datalist-input", "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.", "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", "main": "./lib/DataListInput.js",
"license": "MIT", "license": "MIT",

1
src/DataListInput.css
View File

@ -10,6 +10,7 @@
background-color: #f1f1f1; background-color: #f1f1f1;
width: 100%; width: 100%;
height: 100%; height: 100%;
word-wrap: break-word;
} }
.datalist-items { .datalist-items {

11
src/DataListInput.jsx
View File

@ -63,16 +63,23 @@ class DataListInput extends React.Component {
const { currentInput, visible, lastValidItem } = this.state; const { currentInput, visible, lastValidItem } = this.state;
const { requiredInputLength, dropDownLength, items, match, clearInputOnSelect } = this.props; const { requiredInputLength, dropDownLength, items, match, clearInputOnSelect } = this.props;
const reachedRequiredLength = currentInput.length >= requiredInputLength; const reachedRequiredLength = currentInput.length >= requiredInputLength;
if ( reachedRequiredLength && !visible ) { if ( reachedRequiredLength && !visible ) {
const matchingItems = items.filter( ( item ) => { const matchingItems = items.filter( ( item ) => {
if ( typeof ( match ) === typeof ( Function ) ) { return match( currentInput, item ); } if ( typeof ( match ) === typeof ( Function ) ) { return match( currentInput, item ); }
return this.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 let index = lastValidItem && !clearInputOnSelect
? this.indexOfItem( lastValidItem, displayableItems ) : 0; ? this.indexOfItem( lastValidItem, displayableItems ) : 0;
index = index > 0 ? index : 0; index = index > 0 ? index : 0;
this.setState( { visible: true, matchingItems: displayableItems, focusIndex: index, } ); this.setState( { visible: true, matchingItems: displayableItems, focusIndex: index, } );
} }
} }