react-autocomplete - npm Package Compare versions

Comparing version 1.0.0-rc5 to 1.0.0-rc6

build/lib/Autocomplete.js

@@ -18,3 +18,5 @@ 'use strict';
     shouldItemRender: React.PropTypes.func,
+    getItemValue: React.PropTypes.func.isRequired,
     renderItem: React.PropTypes.func.isRequired,
+    renderMenu: React.PropTypes.func,
     menuStyle: React.PropTypes.object,
@@ -135,5 +137,7 @@ inputProps: React.PropTypes.object,
       event.preventDefault();
+      var itemsLength = this.getFilteredItems().length;
+      if (!itemsLength) return;
       var highlightedIndex = this.state.highlightedIndex;
 
-      var index = highlightedIndex === null || highlightedIndex === this.getFilteredItems().length - 1 ? 0 : highlightedIndex + 1;
+      var index = highlightedIndex === null || highlightedIndex === itemsLength - 1 ? 0 : highlightedIndex + 1;
       this._performAutoCompleteOnKeyUp = true;
@@ -148,5 +152,7 @@ this.setState({
       event.preventDefault();
+      var itemsLength = this.getFilteredItems().length;
+      if (!itemsLength) return;
       var highlightedIndex = this.state.highlightedIndex;
 
-      var index = highlightedIndex === 0 || highlightedIndex === null ? this.getFilteredItems().length - 1 : highlightedIndex - 1;
+      var index = highlightedIndex === 0 || highlightedIndex === null ? itemsLength - 1 : highlightedIndex - 1;
       this._performAutoCompleteOnKeyUp = true;
@@ -174,2 +180,3 @@ this.setState({
         // text entered + menu item has been highlighted + enter is hit -> update value to that of selected menu item, close the menu
+        event.preventDefault();
         var item = this.getFilteredItems()[this.state.highlightedIndex];
@@ -313,4 +320,9 @@ var value = this.props.getItemValue(item);
 
+  isInputFocused: function isInputFocused() {
+    var el = React.findDOMNode(this.refs.input);
+    return el.ownerDocument && el === el.ownerDocument.activeElement;
+  },
+
   handleInputClick: function handleInputClick() {
-    if (this.state.isOpen === false) this.setState({ isOpen: true });
+    if (this.isInputFocused() && this.state.isOpen === false) this.setState({ isOpen: true });else if (this.state.highlightedIndex !== null) this.selectItemFromMouse(this.getFilteredItems()[this.state.highlightedIndex]);
   },
@@ -335,2 +347,3 @@
         'aria-autocomplete': 'both',
+        autoComplete: 'off',
         ref: 'input',
@@ -337,0 +350,0 @@ onFocus: this.handleInputFocus,

CHANGELOG.md

@@ -0,1 +1,15 @@
+v1.0.0-rc6 - 5 June 2016
+--------------------------------------
+
+- Updated propTypes for several props being used but not included here
+- Several issues and fixes from #68, #84, #92, #93, #103, #104, #106
+- Actually built the build/dist files and included them in the publish
+
+v1.0.0-rc5 - 5 June 2016
+--------------------------------------
+
+- Dependencies clean up (removed duplicates and large lodash dependency)
+- Demoted React to peerDependency
+
+
 v1.0.0-rc3 - 25 May 2016
@@ -2,0 +16,0 @@ --------------------------------------

dist/react-autocomplete.js

@@ -90,3 +90,5 @@ (function webpackUniversalModuleDefinition(root, factory) {
 	    shouldItemRender: React.PropTypes.func,
+	    getItemValue: React.PropTypes.func.isRequired,
 	    renderItem: React.PropTypes.func.isRequired,
+	    renderMenu: React.PropTypes.func,
 	    menuStyle: React.PropTypes.object,
@@ -207,5 +209,7 @@ inputProps: React.PropTypes.object,
 	      event.preventDefault();
+	      var itemsLength = this.getFilteredItems().length;
+	      if (!itemsLength) return;
 	      var highlightedIndex = this.state.highlightedIndex;
 	
-	      var index = highlightedIndex === null || highlightedIndex === this.getFilteredItems().length - 1 ? 0 : highlightedIndex + 1;
+	      var index = highlightedIndex === null || highlightedIndex === itemsLength - 1 ? 0 : highlightedIndex + 1;
 	      this._performAutoCompleteOnKeyUp = true;
@@ -220,5 +224,7 @@ this.setState({
 	      event.preventDefault();
+	      var itemsLength = this.getFilteredItems().length;
+	      if (!itemsLength) return;
 	      var highlightedIndex = this.state.highlightedIndex;
 	
-	      var index = highlightedIndex === 0 || highlightedIndex === null ? this.getFilteredItems().length - 1 : highlightedIndex - 1;
+	      var index = highlightedIndex === 0 || highlightedIndex === null ? itemsLength - 1 : highlightedIndex - 1;
 	      this._performAutoCompleteOnKeyUp = true;
@@ -246,2 +252,3 @@ this.setState({
 	        // text entered + menu item has been highlighted + enter is hit -> update value to that of selected menu item, close the menu
+	        event.preventDefault();
 	        var item = this.getFilteredItems()[this.state.highlightedIndex];
@@ -385,4 +392,9 @@ var value = this.props.getItemValue(item);
 	
+	  isInputFocused: function isInputFocused() {
+	    var el = React.findDOMNode(this.refs.input);
+	    return el.ownerDocument && el === el.ownerDocument.activeElement;
+	  },
+	
 	  handleInputClick: function handleInputClick() {
-	    if (this.state.isOpen === false) this.setState({ isOpen: true });
+	    if (this.isInputFocused() && this.state.isOpen === false) this.setState({ isOpen: true });else if (this.state.highlightedIndex !== null) this.selectItemFromMouse(this.getFilteredItems()[this.state.highlightedIndex]);
 	  },
@@ -404,2 +416,3 @@
 	      'aria-autocomplete': 'both',
+	      autoComplete: 'off',
 	      ref: 'input',
@@ -406,0 +419,0 @@ onFocus: this.handleInputFocus,

dist/react-autocomplete.min.js

@@ -1,2 +0,2 @@
-!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e(require("React")):"function"==typeof define&&define.amd?define(["React"],e):"object"==typeof exports?exports.ReactAutocomplete=e(require("React")):t.ReactAutocomplete=e(t.React)}(this,function(t){return function(t){function e(o){if(n[o])return n[o].exports;var i=n[o]={exports:{},id:o,loaded:!1};return t[o].call(i.exports,i,i.exports,e),i.loaded=!0,i.exports}var n={};return e.m=t,e.c=n,e.p="",e(0)}([function(t,e,n){"use strict";t.exports=n(1)},function(t,e,n){(function(e){"use strict";var o=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n=arguments[e];for(var o in n)Object.prototype.hasOwnProperty.call(n,o)&&(t[o]=n[o])}return t},i=n(2),r=n(3),l=[],s=i.createClass({displayName:"Autocomplete",propTypes:{value:i.PropTypes.any,onChange:i.PropTypes.func,onSelect:i.PropTypes.func,shouldItemRender:i.PropTypes.func,renderItem:i.PropTypes.func.isRequired,menuStyle:i.PropTypes.object,inputProps:i.PropTypes.object,wrapperProps:i.PropTypes.object,wrapperStyle:i.PropTypes.object},getDefaultProps:function(){return{value:"",wrapperProps:{},wrapperStyle:{display:"inline-block"},inputProps:{},onChange:function(){},onSelect:function(t,e){},renderMenu:function(t,e,n){return i.createElement("div",{style:o({},n,this.menuStyle),children:t})},shouldItemRender:function(){return!0},menuStyle:{borderRadius:"3px",boxShadow:"0 2px 12px rgba(0, 0, 0, 0.1)",background:"rgba(255, 255, 255, 0.9)",padding:"2px 0",fontSize:"90%",position:"fixed",overflow:"auto",maxHeight:"50%"}}},getInitialState:function(){return{isOpen:!1,highlightedIndex:null}},componentWillMount:function(){this._ignoreBlur=!1,this._performAutoCompleteOnUpdate=!1,this._performAutoCompleteOnKeyUp=!1},componentWillReceiveProps:function(){this._performAutoCompleteOnUpdate=!0},componentDidUpdate:function(t,e){this.state.isOpen===!0&&e.isOpen===!1&&this.setMenuPositions(),this.state.isOpen&&this._performAutoCompleteOnUpdate&&(this._performAutoCompleteOnUpdate=!1,this.maybeAutoCompleteText()),this.maybeScrollItemIntoView()},maybeScrollItemIntoView:function(){if(this.state.isOpen===!0&&null!==this.state.highlightedIndex){var t=this.refs["item-"+this.state.highlightedIndex],e=this.refs.menu;r(t,e,{onlyScrollIfNeeded:!0})}},handleKeyDown:function(t){var e=this;if(this.keyDownHandlers[t.key])this.keyDownHandlers[t.key].call(this,t);else{var n=function(){var n=t.target,o=n.selectionStart,i=n.value;return i===e.state.value?{v:void 0}:void e.setState({highlightedIndex:null,isOpen:!0},function(){e.refs.input.selectionStart=o})}();if("object"==typeof n)return n.v}},handleChange:function(t){this._performAutoCompleteOnKeyUp=!0,this.props.onChange(t,t.target.value)},handleKeyUp:function(){this._performAutoCompleteOnKeyUp&&(this._performAutoCompleteOnKeyUp=!1,this.maybeAutoCompleteText())},keyDownHandlers:{ArrowDown:function(t){t.preventDefault();var e=this.state.highlightedIndex,n=null===e||e===this.getFilteredItems().length-1?0:e+1;this._performAutoCompleteOnKeyUp=!0,this.setState({highlightedIndex:n,isOpen:!0})},ArrowUp:function(t){t.preventDefault();var e=this.state.highlightedIndex,n=0===e||null===e?this.getFilteredItems().length-1:e-1;this._performAutoCompleteOnKeyUp=!0,this.setState({highlightedIndex:n,isOpen:!0})},Enter:function(t){var e=this;if(this.state.isOpen!==!1)if(null==this.state.highlightedIndex)this.setState({isOpen:!1},function(){e.refs.input.select()});else{var n=this.getFilteredItems()[this.state.highlightedIndex],o=this.props.getItemValue(n);this.setState({isOpen:!1,highlightedIndex:null},function(){e.refs.input.setSelectionRange(o.length,o.length),e.props.onSelect(o,n)})}},Escape:function(t){this.setState({highlightedIndex:null,isOpen:!1})}},getFilteredItems:function(){var t=this,e=this.props.items;return this.props.shouldItemRender&&(e=e.filter(function(e){return t.props.shouldItemRender(e,t.props.value)})),this.props.sortItems&&e.sort(function(e,n){return t.props.sortItems(e,n,t.props.value)}),e},maybeAutoCompleteText:function(){var t=this;if(""!==this.props.value){var e=this.state.highlightedIndex,n=this.getFilteredItems();if(0!==n.length){var o=null!==e?n[e]:n[0],i=this.props.getItemValue(o),r=0===i.toLowerCase().indexOf(this.props.value.toLowerCase());if(r){var l=this.refs.input,s=function(){l.value=i,l.setSelectionRange(t.props.value.length,i.length)};null===e?this.setState({highlightedIndex:0},s):s()}}}},setMenuPositions:function(){var t=this.refs.input,n=t.getBoundingClientRect(),o=e.window.getComputedStyle(t),i=parseInt(o.marginBottom,10)||0,r=parseInt(o.marginLeft,10)||0,l=parseInt(o.marginRight,10)||0;this.setState({menuTop:n.bottom+i,menuLeft:n.left+r,menuWidth:n.width+r+l})},highlightItemFromMouse:function(t){this.setState({highlightedIndex:t})},selectItemFromMouse:function(t){var e=this,n=this.props.getItemValue(t);this.setState({isOpen:!1,highlightedIndex:null},function(){e.props.onSelect(n,t),e.refs.input.focus(),e.setIgnoreBlur(!1)})},setIgnoreBlur:function(t){this._ignoreBlur=t},renderMenu:function(){var t=this,e=this.getFilteredItems().map(function(e,n){var o=t.props.renderItem(e,t.state.highlightedIndex===n,{cursor:"default"});return i.cloneElement(o,{onMouseDown:function(){return t.setIgnoreBlur(!0)},onMouseEnter:function(){return t.highlightItemFromMouse(n)},onClick:function(){return t.selectItemFromMouse(e)},ref:"item-"+n})}),n={left:this.state.menuLeft,top:this.state.menuTop,minWidth:this.state.menuWidth},o=this.props.renderMenu(e,this.props.value,n);return i.cloneElement(o,{ref:"menu"})},handleInputBlur:function(){this._ignoreBlur||this.setState({isOpen:!1,highlightedIndex:null})},handleInputFocus:function(){this._ignoreBlur||this.setState({isOpen:!0})},handleInputClick:function(){this.state.isOpen===!1&&this.setState({isOpen:!0})},render:function(){var t=this;return this.props.debug&&l.push({id:l.length,state:this.state}),i.createElement("div",o({style:o({},this.props.wrapperStyle)},this.props.wrapperProps),i.createElement("input",o({},this.props.inputProps,{role:"combobox","aria-autocomplete":"both",ref:"input",onFocus:this.handleInputFocus,onBlur:this.handleInputBlur,onChange:function(e){return t.handleChange(e)},onKeyDown:function(e){return t.handleKeyDown(e)},onKeyUp:function(e){return t.handleKeyUp(e)},onClick:this.handleInputClick,value:this.props.value})),this.state.isOpen&&this.renderMenu(),this.props.debug&&i.createElement("pre",{style:{marginLeft:300}},JSON.stringify(l.slice(l.length-5,l.length),null,2)))}});t.exports=s}).call(e,function(){return this}())},function(e,n){e.exports=t},function(t,e,n){t.exports=n(4)},function(t,e,n){function o(t,e,n){n=n||{},9===e.nodeType&&(e=i.getWindow(e));var o=n.allowHorizontalScroll,r=n.onlyScrollIfNeeded,l=n.alignWithTop,s=n.alignWithLeft;o=void 0===o?!0:o;var p,u,f,a,h,c,d,m,g,v,y=i.isWindow(e),w=i.offset(t),I=i.outerHeight(t),x=i.outerWidth(t);y?(d=e,v=i.height(d),g=i.width(d),m={left:i.scrollLeft(d),top:i.scrollTop(d)},h={left:w.left-m.left,top:w.top-m.top},c={left:w.left+x-(m.left+g),top:w.top+I-(m.top+v)},a=m):(p=i.offset(e),u=e.clientHeight,f=e.clientWidth,a={left:e.scrollLeft,top:e.scrollTop},h={left:w.left-(p.left+(parseFloat(i.css(e,"borderLeftWidth"))||0)),top:w.top-(p.top+(parseFloat(i.css(e,"borderTopWidth"))||0))},c={left:w.left+x-(p.left+f+(parseFloat(i.css(e,"borderRightWidth"))||0)),top:w.top+I-(p.top+u+(parseFloat(i.css(e,"borderBottomWidth"))||0))}),h.top<0||c.top>0?l===!0?i.scrollTop(e,a.top+h.top):l===!1?i.scrollTop(e,a.top+c.top):h.top<0?i.scrollTop(e,a.top+h.top):i.scrollTop(e,a.top+c.top):r||(l=void 0===l?!0:!!l,l?i.scrollTop(e,a.top+h.top):i.scrollTop(e,a.top+c.top)),o&&(h.left<0||c.left>0?s===!0?i.scrollLeft(e,a.left+h.left):s===!1?i.scrollLeft(e,a.left+c.left):h.left<0?i.scrollLeft(e,a.left+h.left):i.scrollLeft(e,a.left+c.left):r||(s=void 0===s?!0:!!s,s?i.scrollLeft(e,a.left+h.left):i.scrollLeft(e,a.left+c.left)))}var i=n(5);t.exports=o},function(t,e){function n(t){var e,n,o,i=t.ownerDocument,r=i.body,l=i&&i.documentElement;return e=t.getBoundingClientRect(),n=e.left,o=e.top,n-=l.clientLeft||r.clientLeft||0,o-=l.clientTop||r.clientTop||0,{left:n,top:o}}function o(t,e){var n=t["page"+(e?"Y":"X")+"Offset"],o="scroll"+(e?"Top":"Left");if("number"!=typeof n){var i=t.document;n=i.documentElement[o],"number"!=typeof n&&(n=i.body[o])}return n}function i(t){return o(t)}function r(t){return o(t,!0)}function l(t){var e=n(t),o=t.ownerDocument,l=o.defaultView||o.parentWindow;return e.left+=i(l),e.top+=r(l),e}function s(t,e,n){var o="",i=t.ownerDocument;return(n=n||i.defaultView.getComputedStyle(t,null))&&(o=n.getPropertyValue(e)||n[e]),o}function p(t,e){var n=t[S]&&t[S][e];if(x.test(n)&&!b.test(e)){var o=t.style,i=o[C],r=t[T][C];t[T][C]=t[S][C],o[C]="fontSize"===e?"1em":n||0,n=o.pixelLeft+O,o[C]=i,t[T][C]=r}return""===n?"auto":n}function u(t,e){"static"===v(t,"position")&&(t.style.position="relative");var n,o,i=l(t),r={};for(o in e)n=parseFloat(v(t,o))||0,r[o]=n+e[o]-i[o];v(t,r)}function f(t,e){for(var n=0;n<t.length;n++)e(t[n])}function a(t){return"border-box"===w(t,"boxSizing")}function h(t,e,n){var o,i={},r=t.style;for(o in e)i[o]=r[o],r[o]=e[o];n.call(t);for(o in e)r[o]=i[o]}function c(t,e,n){var o,i,r,l=0;for(i=0;i<e.length;i++)if(o=e[i])for(r=0;r<n.length;r++){var s;s="border"===o?o+n[r]+"Width":o+n[r],l+=parseFloat(w(t,s))||0}return l}function d(t){return null!=t&&t==t.window}function m(t,e,n){if(d(t))return"width"===e?A.viewportWidth(t):A.viewportHeight(t);if(9===t.nodeType)return"width"===e?A.docWidth(t):A.docHeight(t);var o="width"===e?["Left","Right"]:["Top","Bottom"],i="width"===e?t.offsetWidth:t.offsetHeight,r=w(t),l=a(t,r),s=0;(null==i||0>=i)&&(i=void 0,s=w(t,e),(null==s||Number(s)<0)&&(s=t.style[e]||0),s=parseFloat(s)||0),void 0===n&&(n=l?P:L);var p=void 0!==i||l,u=i||s;return n===L?p?u-c(t,["border","padding"],o,r):s:p?u+(n===P?0:n===R?-c(t,["border"],o,r):c(t,["margin"],o,r)):s+c(t,W.slice(n),o,r)}function g(t){var e,n=arguments;return 0!==t.offsetWidth?e=m.apply(void 0,n):h(t,B,function(){e=m.apply(void 0,n)}),e}function v(t,e,n){if("object"!=typeof e)return"undefined"==typeof n?w(t,e):("number"==typeof n&&(n+="px"),void(t.style[e]=n));for(var o in e)v(t,o,e[o])}function y(t,e){for(var n in e)t[n]=e[n];return t}var w,I=/[\-+]?(?:\d*\.|)\d+(?:[eE][\-+]?\d+|)/.source,x=new RegExp("^("+I+")(?!px)[a-z%]+$","i"),b=/^(top|right|bottom|left)$/,S="currentStyle",T="runtimeStyle",C="left",O="px";"undefined"!=typeof window&&(w=window.getComputedStyle?s:p);var W=["margin","border","padding"],L=-1,R=2,P=1,F=0,A={};f(["Width","Height"],function(t){A["doc"+t]=function(e){var n=e.document;return Math.max(n.documentElement["scroll"+t],n.body["scroll"+t],A["viewport"+t](n))},A["viewport"+t]=function(e){var n="client"+t,o=e.document,i=o.body,r=o.documentElement,l=r[n];return"CSS1Compat"===o.compatMode&&l||i&&i[n]||l}});var B={position:"absolute",visibility:"hidden",display:"block"};f(["width","height"],function(t){var e=t.charAt(0).toUpperCase()+t.slice(1);A["outer"+e]=function(e,n){return e&&g(e,t,n?F:P)};var n="width"===t?["Left","Right"]:["Top","Bottom"];A[t]=function(e,o){if(void 0===o)return e&&g(e,t,L);if(e){var i=w(e),r=a(e);return r&&(o+=c(e,["padding","border"],n,i)),v(e,t,o)}}});var D=t.exports={getWindow:function(t){var e=t.ownerDocument||t;return e.defaultView||e.parentWindow},offset:function(t,e){return"undefined"==typeof e?l(t):void u(t,e)},isWindow:d,each:f,css:v,clone:function(t){var e={};for(var n in t)e[n]=t[n];var o=t.overflow;if(o)for(n in t)e.overflow[n]=t.overflow[n];return e},mix:y,scrollLeft:function(t,e){if(d(t)){if(void 0===e)return i(t);window.scrollTo(e,r(t))}else{if(void 0===e)return t.scrollLeft;t.scrollLeft=e}},scrollTop:function(t,e){if(d(t)){if(void 0===e)return r(t);window.scrollTo(i(t),e)}else{if(void 0===e)return t.scrollTop;t.scrollTop=e}},merge:function(){for(var t={},e=0;e<arguments.length;e++)D.mix(t,arguments[e]);return t},viewportWidth:0,viewportHeight:0};y(D,A)}])});
+!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e(require("React")):"function"==typeof define&&define.amd?define(["React"],e):"object"==typeof exports?exports.ReactAutocomplete=e(require("React")):t.ReactAutocomplete=e(t.React)}(this,function(t){return function(t){function e(o){if(n[o])return n[o].exports;var i=n[o]={exports:{},id:o,loaded:!1};return t[o].call(i.exports,i,i.exports,e),i.loaded=!0,i.exports}var n={};return e.m=t,e.c=n,e.p="",e(0)}([function(t,e,n){"use strict";t.exports=n(1)},function(t,e,n){(function(e){"use strict";var o=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n=arguments[e];for(var o in n)Object.prototype.hasOwnProperty.call(n,o)&&(t[o]=n[o])}return t},i=n(2),r=n(3),s=[],l=i.createClass({displayName:"Autocomplete",propTypes:{value:i.PropTypes.any,onChange:i.PropTypes.func,onSelect:i.PropTypes.func,shouldItemRender:i.PropTypes.func,getItemValue:i.PropTypes.func.isRequired,renderItem:i.PropTypes.func.isRequired,renderMenu:i.PropTypes.func,menuStyle:i.PropTypes.object,inputProps:i.PropTypes.object,wrapperProps:i.PropTypes.object,wrapperStyle:i.PropTypes.object},getDefaultProps:function(){return{value:"",wrapperProps:{},wrapperStyle:{display:"inline-block"},inputProps:{},onChange:function(){},onSelect:function(t,e){},renderMenu:function(t,e,n){return i.createElement("div",{style:o({},n,this.menuStyle),children:t})},shouldItemRender:function(){return!0},menuStyle:{borderRadius:"3px",boxShadow:"0 2px 12px rgba(0, 0, 0, 0.1)",background:"rgba(255, 255, 255, 0.9)",padding:"2px 0",fontSize:"90%",position:"fixed",overflow:"auto",maxHeight:"50%"}}},getInitialState:function(){return{isOpen:!1,highlightedIndex:null}},componentWillMount:function(){this._ignoreBlur=!1,this._performAutoCompleteOnUpdate=!1,this._performAutoCompleteOnKeyUp=!1},componentWillReceiveProps:function(){this._performAutoCompleteOnUpdate=!0},componentDidUpdate:function(t,e){this.state.isOpen===!0&&e.isOpen===!1&&this.setMenuPositions(),this.state.isOpen&&this._performAutoCompleteOnUpdate&&(this._performAutoCompleteOnUpdate=!1,this.maybeAutoCompleteText()),this.maybeScrollItemIntoView()},maybeScrollItemIntoView:function(){if(this.state.isOpen===!0&&null!==this.state.highlightedIndex){var t=this.refs["item-"+this.state.highlightedIndex],e=this.refs.menu;r(t,e,{onlyScrollIfNeeded:!0})}},handleKeyDown:function(t){var e=this;if(this.keyDownHandlers[t.key])this.keyDownHandlers[t.key].call(this,t);else{var n=function(){var n=t.target,o=n.selectionStart,i=n.value;return i===e.state.value?{v:void 0}:void e.setState({highlightedIndex:null,isOpen:!0},function(){e.refs.input.selectionStart=o})}();if("object"==typeof n)return n.v}},handleChange:function(t){this._performAutoCompleteOnKeyUp=!0,this.props.onChange(t,t.target.value)},handleKeyUp:function(){this._performAutoCompleteOnKeyUp&&(this._performAutoCompleteOnKeyUp=!1,this.maybeAutoCompleteText())},keyDownHandlers:{ArrowDown:function(t){t.preventDefault();var e=this.getFilteredItems().length;if(e){var n=this.state.highlightedIndex,o=null===n||n===e-1?0:n+1;this._performAutoCompleteOnKeyUp=!0,this.setState({highlightedIndex:o,isOpen:!0})}},ArrowUp:function(t){t.preventDefault();var e=this.getFilteredItems().length;if(e){var n=this.state.highlightedIndex,o=0===n||null===n?e-1:n-1;this._performAutoCompleteOnKeyUp=!0,this.setState({highlightedIndex:o,isOpen:!0})}},Enter:function(t){var e=this;if(this.state.isOpen!==!1)if(null==this.state.highlightedIndex)this.setState({isOpen:!1},function(){e.refs.input.select()});else{t.preventDefault();var n=this.getFilteredItems()[this.state.highlightedIndex],o=this.props.getItemValue(n);this.setState({isOpen:!1,highlightedIndex:null},function(){e.refs.input.setSelectionRange(o.length,o.length),e.props.onSelect(o,n)})}},Escape:function(t){this.setState({highlightedIndex:null,isOpen:!1})}},getFilteredItems:function(){var t=this,e=this.props.items;return this.props.shouldItemRender&&(e=e.filter(function(e){return t.props.shouldItemRender(e,t.props.value)})),this.props.sortItems&&e.sort(function(e,n){return t.props.sortItems(e,n,t.props.value)}),e},maybeAutoCompleteText:function(){var t=this;if(""!==this.props.value){var e=this.state.highlightedIndex,n=this.getFilteredItems();if(0!==n.length){var o=null!==e?n[e]:n[0],i=this.props.getItemValue(o),r=0===i.toLowerCase().indexOf(this.props.value.toLowerCase());if(r){var s=this.refs.input,l=function(){s.value=i,s.setSelectionRange(t.props.value.length,i.length)};null===e?this.setState({highlightedIndex:0},l):l()}}}},setMenuPositions:function(){var t=this.refs.input,n=t.getBoundingClientRect(),o=e.window.getComputedStyle(t),i=parseInt(o.marginBottom,10)||0,r=parseInt(o.marginLeft,10)||0,s=parseInt(o.marginRight,10)||0;this.setState({menuTop:n.bottom+i,menuLeft:n.left+r,menuWidth:n.width+r+s})},highlightItemFromMouse:function(t){this.setState({highlightedIndex:t})},selectItemFromMouse:function(t){var e=this,n=this.props.getItemValue(t);this.setState({isOpen:!1,highlightedIndex:null},function(){e.props.onSelect(n,t),e.refs.input.focus(),e.setIgnoreBlur(!1)})},setIgnoreBlur:function(t){this._ignoreBlur=t},renderMenu:function(){var t=this,e=this.getFilteredItems().map(function(e,n){var o=t.props.renderItem(e,t.state.highlightedIndex===n,{cursor:"default"});return i.cloneElement(o,{onMouseDown:function(){return t.setIgnoreBlur(!0)},onMouseEnter:function(){return t.highlightItemFromMouse(n)},onClick:function(){return t.selectItemFromMouse(e)},ref:"item-"+n})}),n={left:this.state.menuLeft,top:this.state.menuTop,minWidth:this.state.menuWidth},o=this.props.renderMenu(e,this.props.value,n);return i.cloneElement(o,{ref:"menu"})},handleInputBlur:function(){this._ignoreBlur||this.setState({isOpen:!1,highlightedIndex:null})},handleInputFocus:function(){this._ignoreBlur||this.setState({isOpen:!0})},isInputFocused:function(){var t=i.findDOMNode(this.refs.input);return t.ownerDocument&&t===t.ownerDocument.activeElement},handleInputClick:function(){this.isInputFocused()&&this.state.isOpen===!1?this.setState({isOpen:!0}):null!==this.state.highlightedIndex&&this.selectItemFromMouse(this.getFilteredItems()[this.state.highlightedIndex])},render:function(){var t=this;return this.props.debug&&s.push({id:s.length,state:this.state}),i.createElement("div",o({style:o({},this.props.wrapperStyle)},this.props.wrapperProps),i.createElement("input",o({},this.props.inputProps,{role:"combobox","aria-autocomplete":"both",autoComplete:"off",ref:"input",onFocus:this.handleInputFocus,onBlur:this.handleInputBlur,onChange:function(e){return t.handleChange(e)},onKeyDown:function(e){return t.handleKeyDown(e)},onKeyUp:function(e){return t.handleKeyUp(e)},onClick:this.handleInputClick,value:this.props.value})),this.state.isOpen&&this.renderMenu(),this.props.debug&&i.createElement("pre",{style:{marginLeft:300}},JSON.stringify(s.slice(s.length-5,s.length),null,2)))}});t.exports=l}).call(e,function(){return this}())},function(e,n){e.exports=t},function(t,e,n){t.exports=n(4)},function(t,e,n){function o(t,e,n){n=n||{},9===e.nodeType&&(e=i.getWindow(e));var o=n.allowHorizontalScroll,r=n.onlyScrollIfNeeded,s=n.alignWithTop,l=n.alignWithLeft;o=void 0===o?!0:o;var u,p,f,a,h,c,d,m,g,v,y=i.isWindow(e),w=i.offset(t),I=i.outerHeight(t),x=i.outerWidth(t);y?(d=e,v=i.height(d),g=i.width(d),m={left:i.scrollLeft(d),top:i.scrollTop(d)},h={left:w.left-m.left,top:w.top-m.top},c={left:w.left+x-(m.left+g),top:w.top+I-(m.top+v)},a=m):(u=i.offset(e),p=e.clientHeight,f=e.clientWidth,a={left:e.scrollLeft,top:e.scrollTop},h={left:w.left-(u.left+(parseFloat(i.css(e,"borderLeftWidth"))||0)),top:w.top-(u.top+(parseFloat(i.css(e,"borderTopWidth"))||0))},c={left:w.left+x-(u.left+f+(parseFloat(i.css(e,"borderRightWidth"))||0)),top:w.top+I-(u.top+p+(parseFloat(i.css(e,"borderBottomWidth"))||0))}),h.top<0||c.top>0?s===!0?i.scrollTop(e,a.top+h.top):s===!1?i.scrollTop(e,a.top+c.top):h.top<0?i.scrollTop(e,a.top+h.top):i.scrollTop(e,a.top+c.top):r||(s=void 0===s?!0:!!s,s?i.scrollTop(e,a.top+h.top):i.scrollTop(e,a.top+c.top)),o&&(h.left<0||c.left>0?l===!0?i.scrollLeft(e,a.left+h.left):l===!1?i.scrollLeft(e,a.left+c.left):h.left<0?i.scrollLeft(e,a.left+h.left):i.scrollLeft(e,a.left+c.left):r||(l=void 0===l?!0:!!l,l?i.scrollLeft(e,a.left+h.left):i.scrollLeft(e,a.left+c.left)))}var i=n(5);t.exports=o},function(t,e){function n(t){var e,n,o,i=t.ownerDocument,r=i.body,s=i&&i.documentElement;return e=t.getBoundingClientRect(),n=e.left,o=e.top,n-=s.clientLeft||r.clientLeft||0,o-=s.clientTop||r.clientTop||0,{left:n,top:o}}function o(t,e){var n=t["page"+(e?"Y":"X")+"Offset"],o="scroll"+(e?"Top":"Left");if("number"!=typeof n){var i=t.document;n=i.documentElement[o],"number"!=typeof n&&(n=i.body[o])}return n}function i(t){return o(t)}function r(t){return o(t,!0)}function s(t){var e=n(t),o=t.ownerDocument,s=o.defaultView||o.parentWindow;return e.left+=i(s),e.top+=r(s),e}function l(t,e,n){var o="",i=t.ownerDocument;return(n=n||i.defaultView.getComputedStyle(t,null))&&(o=n.getPropertyValue(e)||n[e]),o}function u(t,e){var n=t[S]&&t[S][e];if(x.test(n)&&!b.test(e)){var o=t.style,i=o[C],r=t[T][C];t[T][C]=t[S][C],o[C]="fontSize"===e?"1em":n||0,n=o.pixelLeft+O,o[C]=i,t[T][C]=r}return""===n?"auto":n}function p(t,e){"static"===v(t,"position")&&(t.style.position="relative");var n,o,i=s(t),r={};for(o in e)n=parseFloat(v(t,o))||0,r[o]=n+e[o]-i[o];v(t,r)}function f(t,e){for(var n=0;n<t.length;n++)e(t[n])}function a(t){return"border-box"===w(t,"boxSizing")}function h(t,e,n){var o,i={},r=t.style;for(o in e)i[o]=r[o],r[o]=e[o];n.call(t);for(o in e)r[o]=i[o]}function c(t,e,n){var o,i,r,s=0;for(i=0;i<e.length;i++)if(o=e[i])for(r=0;r<n.length;r++){var l;l="border"===o?o+n[r]+"Width":o+n[r],s+=parseFloat(w(t,l))||0}return s}function d(t){return null!=t&&t==t.window}function m(t,e,n){if(d(t))return"width"===e?D.viewportWidth(t):D.viewportHeight(t);if(9===t.nodeType)return"width"===e?D.docWidth(t):D.docHeight(t);var o="width"===e?["Left","Right"]:["Top","Bottom"],i="width"===e?t.offsetWidth:t.offsetHeight,r=w(t),s=a(t,r),l=0;(null==i||0>=i)&&(i=void 0,l=w(t,e),(null==l||Number(l)<0)&&(l=t.style[e]||0),l=parseFloat(l)||0),void 0===n&&(n=s?P:L);var u=void 0!==i||s,p=i||l;return n===L?u?p-c(t,["border","padding"],o,r):l:u?p+(n===P?0:n===F?-c(t,["border"],o,r):c(t,["margin"],o,r)):l+c(t,W.slice(n),o,r)}function g(t){var e,n=arguments;return 0!==t.offsetWidth?e=m.apply(void 0,n):h(t,A,function(){e=m.apply(void 0,n)}),e}function v(t,e,n){if("object"!=typeof e)return"undefined"==typeof n?w(t,e):("number"==typeof n&&(n+="px"),void(t.style[e]=n));for(var o in e)v(t,o,e[o])}function y(t,e){for(var n in e)t[n]=e[n];return t}var w,I=/[\-+]?(?:\d*\.|)\d+(?:[eE][\-+]?\d+|)/.source,x=new RegExp("^("+I+")(?!px)[a-z%]+$","i"),b=/^(top|right|bottom|left)$/,S="currentStyle",T="runtimeStyle",C="left",O="px";"undefined"!=typeof window&&(w=window.getComputedStyle?l:u);var W=["margin","border","padding"],L=-1,F=2,P=1,R=0,D={};f(["Width","Height"],function(t){D["doc"+t]=function(e){var n=e.document;return Math.max(n.documentElement["scroll"+t],n.body["scroll"+t],D["viewport"+t](n))},D["viewport"+t]=function(e){var n="client"+t,o=e.document,i=o.body,r=o.documentElement,s=r[n];return"CSS1Compat"===o.compatMode&&s||i&&i[n]||s}});var A={position:"absolute",visibility:"hidden",display:"block"};f(["width","height"],function(t){var e=t.charAt(0).toUpperCase()+t.slice(1);D["outer"+e]=function(e,n){return e&&g(e,t,n?R:P)};var n="width"===t?["Left","Right"]:["Top","Bottom"];D[t]=function(e,o){if(void 0===o)return e&&g(e,t,L);if(e){var i=w(e),r=a(e);return r&&(o+=c(e,["padding","border"],n,i)),v(e,t,o)}}});var M=t.exports={getWindow:function(t){var e=t.ownerDocument||t;return e.defaultView||e.parentWindow},offset:function(t,e){return"undefined"==typeof e?s(t):void p(t,e)},isWindow:d,each:f,css:v,clone:function(t){var e={};for(var n in t)e[n]=t[n];var o=t.overflow;if(o)for(n in t)e.overflow[n]=t.overflow[n];return e},mix:y,scrollLeft:function(t,e){if(d(t)){if(void 0===e)return i(t);window.scrollTo(e,r(t))}else{if(void 0===e)return t.scrollLeft;t.scrollLeft=e}},scrollTop:function(t,e){if(d(t)){if(void 0===e)return r(t);window.scrollTo(i(t),e)}else{if(void 0===e)return t.scrollTop;t.scrollTop=e}},merge:function(){for(var t={},e=0;e<arguments.length;e++)M.mix(t,arguments[e]);return t},viewportWidth:0,viewportHeight:0};y(M,D)}])});
 //# sourceMappingURL=react-autocomplete.min.js.map

lib/Autocomplete.js

@@ -13,3 +13,5 @@ const React = require('react')
     shouldItemRender: React.PropTypes.func,
+    getItemValue: React.PropTypes.func.isRequired,
     renderItem: React.PropTypes.func.isRequired,
+    renderMenu: React.PropTypes.func,
     menuStyle: React.PropTypes.object,
@@ -120,6 +122,8 @@ inputProps: React.PropTypes.object,
       event.preventDefault()
+      const itemsLength = this.getFilteredItems().length
+      if (!itemsLength) return
       var { highlightedIndex } = this.state
       var index = (
         highlightedIndex === null ||
-        highlightedIndex === this.getFilteredItems().length - 1
+        highlightedIndex === itemsLength - 1
       ) ?  0 : highlightedIndex + 1
@@ -135,2 +139,4 @@ this._performAutoCompleteOnKeyUp = true
       event.preventDefault()
+      const itemsLength = this.getFilteredItems().length
+      if (!itemsLength) return
       var { highlightedIndex } = this.state
@@ -140,3 +146,3 @@ var index = (
         highlightedIndex === null
-      ) ? this.getFilteredItems().length - 1 : highlightedIndex - 1
+      ) ? itemsLength - 1 : highlightedIndex - 1
       this._performAutoCompleteOnKeyUp = true
@@ -164,2 +170,3 @@ this.setState({
         // text entered + menu item has been highlighted + enter is hit -> update value to that of selected menu item, close the menu
+        event.preventDefault()
         var item = this.getFilteredItems()[this.state.highlightedIndex]
@@ -305,5 +312,12 @@ var value = this.props.getItemValue(item)
 
+  isInputFocused () {
+    var el = React.findDOMNode(this.refs.input)
+    return el.ownerDocument && (el === el.ownerDocument.activeElement)
+  },
+
   handleInputClick () {
-    if (this.state.isOpen === false)
+    if (this.isInputFocused() && this.state.isOpen === false)
       this.setState({ isOpen: true })
+    else if (this.state.highlightedIndex !== null)
+      this.selectItemFromMouse(this.getFilteredItems()[this.state.highlightedIndex])
   },
@@ -325,2 +339,3 @@
           aria-autocomplete="both"
+          autoComplete="off"
           ref="input"
@@ -327,0 +342,0 @@ onFocus={this.handleInputFocus}

package.json

 {
   "name": "react-autocomplete",
-  "version": "1.0.0-rc5",
+  "version": "1.0.0-rc6",
   "description": "Accessible, extensible, Autocomplete for React.js",
@@ -5,0 +5,0 @@ "main": "./build/lib/index.js",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

210506

increased by2.75%

Lines of code

1718

increased by2.32%

No dependency changes