react-autocomplete - npm Package Compare versions

Comparing version 1.1.0 to 1.2.0

build/lib/Autocomplete.js

@@ -31,2 +31,3 @@ 'use strict';
     wrapperStyle: React.PropTypes.object,
+    autoHighlight: React.PropTypes.bool,
     debug: React.PropTypes.bool
@@ -59,7 +60,8 @@ },
         overflow: 'auto',
-        maxHeight: '50%' }
+        maxHeight: '50%' },
+      // TODO: don't cheat, let it flow to the bottom
+      autoHighlight: true
     };
   },
 
-  // TODO: don't cheat, let it flow to the bottom
   getInitialState: function getInitialState() {
@@ -218,3 +220,3 @@ return {
   maybeAutoCompleteText: function maybeAutoCompleteText() {
-    if (this.props.value === '') return;
+    if (!this.props.autoHighlight || this.props.value === '') return;
     var highlightedIndex = this.state.highlightedIndex;
@@ -258,3 +260,2 @@
       _this3.refs.input.focus();
-      _this3.setIgnoreBlur(false);
     });
@@ -275,3 +276,3 @@ },
           return _this4.setIgnoreBlur(true);
-        },
+        }, // Ignore blur to prevent menu from de-rendering before we can process click
         onMouseEnter: function onMouseEnter() {
@@ -304,3 +305,6 @@ return _this4.highlightItemFromMouse(index);
   handleInputFocus: function handleInputFocus() {
-    if (this._ignoreBlur) return;
+    if (this._ignoreBlur) {
+      this.setIgnoreBlur(false);
+      return;
+    }
     // We don't want `selectItemFromMouse` to trigger when
@@ -307,0 +311,0 @@ // the user clicks into the input to focus it, so set this

build/package.json

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

CHANGELOG.md

 # CHANGELOG
 We try to follow [http://keepachangelog.com/](http://keepachangelog.com/) recommendations for easier to update & more readable change logs.
 
-## Unreleased
+## [Unreleased]
 _(add items here for easier creation of next log entry)_
 
-## [1.1.0] - 2015-12-03
+## [1.2.0] - 2016-08-09
 ### Added
+- `props.autoHighlight` to toggle automatic highlighting of top match (see #146 & #159)
+
+### Fixed
+- Bug which prevented menu from closing properly in IE (see #153)
+- .babelrc presets were causing 1 user(s) to not be able to run tests locally with Jest
+
+## [1.1.0] - 2016-08-02
+### Added
 - Ability to return custom components from renderMenu/renderItem (see #127)
@@ -27,3 +35,3 @@ - Added missing `propTypes`
 
-v1.0.1 - 26 June 2016
+## [1.0.1] - 2016-06-26
 --------------------------------------
@@ -114,2 +122,4 @@
 
-
+[Unreleased]: https://github.com/reactjs/react-autocomplete/compare/v1.1.0...HEAD
+[1.1.0]: https://github.com/reactjs/react-autocomplete/compare/v1.0.1...v1.1.0
+[1.0.1]: https://github.com/reactjs/react-autocomplete/compare/v1.0.0...v1.0.1

dist/react-autocomplete.js

@@ -103,2 +103,3 @@ (function webpackUniversalModuleDefinition(root, factory) {
 	    wrapperStyle: React.PropTypes.object,
+	    autoHighlight: React.PropTypes.bool,
 	    debug: React.PropTypes.bool
@@ -131,7 +132,8 @@ },
 	        overflow: 'auto',
-	        maxHeight: '50%' }
+	        maxHeight: '50%' },
+	      // TODO: don't cheat, let it flow to the bottom
+	      autoHighlight: true
 	    };
 	  },
 	
-	  // TODO: don't cheat, let it flow to the bottom
 	  getInitialState: function getInitialState() {
@@ -290,3 +292,3 @@ return {
 	  maybeAutoCompleteText: function maybeAutoCompleteText() {
-	    if (this.props.value === '') return;
+	    if (!this.props.autoHighlight || this.props.value === '') return;
 	    var highlightedIndex = this.state.highlightedIndex;
@@ -330,3 +332,2 @@
 	      _this3.refs.input.focus();
-	      _this3.setIgnoreBlur(false);
 	    });
@@ -347,3 +348,3 @@ },
 	          return _this4.setIgnoreBlur(true);
-	        },
+	        }, // Ignore blur to prevent menu from de-rendering before we can process click
 	        onMouseEnter: function onMouseEnter() {
@@ -376,3 +377,6 @@ return _this4.highlightItemFromMouse(index);
 	  handleInputFocus: function handleInputFocus() {
-	    if (this._ignoreBlur) return;
+	    if (this._ignoreBlur) {
+	      this.setIgnoreBlur(false);
+	      return;
+	    }
 	    // We don't want `selectItemFromMouse` to trigger when
@@ -379,0 +383,0 @@ // the user clicks into the input to focus it, so set this

dist/react-autocomplete.min.js

@@ -1,2 +0,2 @@
-!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e(require("React"),require("ReactDOM")):"function"==typeof define&&define.amd?define(["React","ReactDOM"],e):"object"==typeof exports?exports.ReactAutocomplete=e(require("React"),require("ReactDOM")):t.ReactAutocomplete=e(t.React,t.ReactDOM)}(this,function(t,e){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=r.findDOMNode,l=n(4),p=[],u=i.createClass({displayName:"Autocomplete",propTypes:{value:i.PropTypes.any,onChange:i.PropTypes.func,onSelect:i.PropTypes.func,shouldItemRender:i.PropTypes.func,sortItems: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,debug:i.PropTypes.bool},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(t){this._performAutoCompleteOnUpdate=!0,(this.props.items!==t.items||this.state.highlightedIndex>=t.items.length)&&this.setState({highlightedIndex:null})},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;l(s(t),s(e),{onlyScrollIfNeeded:!0})}},handleKeyDown:function(t){this.keyDownHandlers[t.key]?this.keyDownHandlers[t.key].call(this,t):this.setState({highlightedIndex:null,isOpen:!0})},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(){if(""!==this.props.value){var t=this.state.highlightedIndex,e=this.getFilteredItems();if(0!==e.length){var n=null!==t?e[t]:e[0],o=this.props.getItemValue(n),i=0===o.toLowerCase().indexOf(this.props.value.toLowerCase());i&&null===t&&this.setState({highlightedIndex:0})}}},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._ignoreClick=!0,this.setState({isOpen:!0}))},isInputFocused:function(){var t=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._ignoreClick||this.selectItemFromMouse(this.getFilteredItems()[this.state.highlightedIndex]),this._ignoreClick=!1},render:function(){var t=this;return this.props.debug&&p.push({id:p.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":"list",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(p.slice(p.length-5,p.length),null,2)))}});t.exports=u}).call(e,function(){return this}())},function(e,n){e.exports=t},function(t,n){t.exports=e},function(t,e,n){t.exports=n(5)},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 p,u,f,h,a,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)},a={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)},h=m):(p=i.offset(e),u=e.clientHeight,f=e.clientWidth,h={left:e.scrollLeft,top:e.scrollTop},a={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))}),a.top<0||c.top>0?s===!0?i.scrollTop(e,h.top+a.top):s===!1?i.scrollTop(e,h.top+c.top):a.top<0?i.scrollTop(e,h.top+a.top):i.scrollTop(e,h.top+c.top):r||(s=void 0===s?!0:!!s,s?i.scrollTop(e,h.top+a.top):i.scrollTop(e,h.top+c.top)),o&&(a.left<0||c.left>0?l===!0?i.scrollLeft(e,h.left+a.left):l===!1?i.scrollLeft(e,h.left+c.left):a.left<0?i.scrollLeft(e,h.left+a.left):i.scrollLeft(e,h.left+c.left):r||(l=void 0===l?!0:!!l,l?i.scrollLeft(e,h.left+a.left):i.scrollLeft(e,h.left+c.left)))}var i=n(6);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 p(t,e){var n=t[S]&&t[S][e];if(x.test(n)&&!b.test(e)){var o=t.style,i=o[O],r=t[T][O];t[T][O]=t[S][O],o[O]="fontSize"===e?"1em":n||0,n=o.pixelLeft+C,o[O]=i,t[T][O]=r}return""===n?"auto":n}function u(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 h(t){return"border-box"===w(t,"boxSizing")}function a(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?F.viewportWidth(t):F.viewportHeight(t);if(9===t.nodeType)return"width"===e?F.docWidth(t):F.docHeight(t);var o="width"===e?["Left","Right"]:["Top","Bottom"],i="width"===e?t.offsetWidth:t.offsetHeight,r=w(t),s=h(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:W);var p=void 0!==i||s,u=i||l;return n===W?p?u-c(t,["border","padding"],o,r):l:p?u+(n===P?0:n===L?-c(t,["border"],o,r):c(t,["margin"],o,r)):l+c(t,R.slice(n),o,r)}function g(t){var e,n=arguments;return 0!==t.offsetWidth?e=m.apply(void 0,n):a(t,M,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",O="left",C="px";"undefined"!=typeof window&&(w=window.getComputedStyle?l:p);var R=["margin","border","padding"],W=-1,L=2,P=1,D=0,F={};f(["Width","Height"],function(t){F["doc"+t]=function(e){var n=e.document;return Math.max(n.documentElement["scroll"+t],n.body["scroll"+t],F["viewport"+t](n))},F["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 M={position:"absolute",visibility:"hidden",display:"block"};f(["width","height"],function(t){var e=t.charAt(0).toUpperCase()+t.slice(1);F["outer"+e]=function(e,n){return e&&g(e,t,n?D:P)};var n="width"===t?["Left","Right"]:["Top","Bottom"];F[t]=function(e,o){if(void 0===o)return e&&g(e,t,W);if(e){var i=w(e),r=h(e);return r&&(o+=c(e,["padding","border"],n,i)),v(e,t,o)}}});var A=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 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++)A.mix(t,arguments[e]);return t},viewportWidth:0,viewportHeight:0};y(A,F)}])});
+!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e(require("React"),require("ReactDOM")):"function"==typeof define&&define.amd?define(["React","ReactDOM"],e):"object"==typeof exports?exports.ReactAutocomplete=e(require("React"),require("ReactDOM")):t.ReactAutocomplete=e(t.React,t.ReactDOM)}(this,function(t,e){return function(t){function e(n){if(o[n])return o[n].exports;var i=o[n]={exports:{},id:n,loaded:!1};return t[n].call(i.exports,i,i.exports,e),i.loaded=!0,i.exports}var o={};return e.m=t,e.c=o,e.p="",e(0)}([function(t,e,o){"use strict";t.exports=o(1)},function(t,e,o){(function(e){"use strict";var n=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var o=arguments[e];for(var n in o)Object.prototype.hasOwnProperty.call(o,n)&&(t[n]=o[n])}return t},i=o(2),r=o(3),s=r.findDOMNode,l=o(4),p=[],u=i.createClass({displayName:"Autocomplete",propTypes:{value:i.PropTypes.any,onChange:i.PropTypes.func,onSelect:i.PropTypes.func,shouldItemRender:i.PropTypes.func,sortItems: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,autoHighlight:i.PropTypes.bool,debug:i.PropTypes.bool},getDefaultProps:function(){return{value:"",wrapperProps:{},wrapperStyle:{display:"inline-block"},inputProps:{},onChange:function(){},onSelect:function(t,e){},renderMenu:function(t,e,o){return i.createElement("div",{style:n({},o,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%"},autoHighlight:!0}},getInitialState:function(){return{isOpen:!1,highlightedIndex:null}},componentWillMount:function(){this._ignoreBlur=!1,this._performAutoCompleteOnUpdate=!1,this._performAutoCompleteOnKeyUp=!1},componentWillReceiveProps:function(t){this._performAutoCompleteOnUpdate=!0,(this.props.items!==t.items||this.state.highlightedIndex>=t.items.length)&&this.setState({highlightedIndex:null})},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;l(s(t),s(e),{onlyScrollIfNeeded:!0})}},handleKeyDown:function(t){this.keyDownHandlers[t.key]?this.keyDownHandlers[t.key].call(this,t):this.setState({highlightedIndex:null,isOpen:!0})},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 o=this.state.highlightedIndex,n=null===o||o===e-1?0:o+1;this._performAutoCompleteOnKeyUp=!0,this.setState({highlightedIndex:n,isOpen:!0})}},ArrowUp:function(t){t.preventDefault();var e=this.getFilteredItems().length;if(e){var o=this.state.highlightedIndex,n=0===o||null===o?e-1:o-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{t.preventDefault();var o=this.getFilteredItems()[this.state.highlightedIndex],n=this.props.getItemValue(o);this.setState({isOpen:!1,highlightedIndex:null},function(){e.refs.input.setSelectionRange(n.length,n.length),e.props.onSelect(n,o)})}},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,o){return t.props.sortItems(e,o,t.props.value)}),e},maybeAutoCompleteText:function(){if(this.props.autoHighlight&&""!==this.props.value){var t=this.state.highlightedIndex,e=this.getFilteredItems();if(0!==e.length){var o=null!==t?e[t]:e[0],n=this.props.getItemValue(o),i=0===n.toLowerCase().indexOf(this.props.value.toLowerCase());i&&null===t&&this.setState({highlightedIndex:0})}}},setMenuPositions:function(){var t=this.refs.input,o=t.getBoundingClientRect(),n=e.window.getComputedStyle(t),i=parseInt(n.marginBottom,10)||0,r=parseInt(n.marginLeft,10)||0,s=parseInt(n.marginRight,10)||0;this.setState({menuTop:o.bottom+i,menuLeft:o.left+r,menuWidth:o.width+r+s})},highlightItemFromMouse:function(t){this.setState({highlightedIndex:t})},selectItemFromMouse:function(t){var e=this,o=this.props.getItemValue(t);this.setState({isOpen:!1,highlightedIndex:null},function(){e.props.onSelect(o,t),e.refs.input.focus()})},setIgnoreBlur:function(t){this._ignoreBlur=t},renderMenu:function(){var t=this,e=this.getFilteredItems().map(function(e,o){var n=t.props.renderItem(e,t.state.highlightedIndex===o,{cursor:"default"});return i.cloneElement(n,{onMouseDown:function(){return t.setIgnoreBlur(!0)},onMouseEnter:function(){return t.highlightItemFromMouse(o)},onClick:function(){return t.selectItemFromMouse(e)},ref:"item-"+o})}),o={left:this.state.menuLeft,top:this.state.menuTop,minWidth:this.state.menuWidth},n=this.props.renderMenu(e,this.props.value,o);return i.cloneElement(n,{ref:"menu"})},handleInputBlur:function(){this._ignoreBlur||this.setState({isOpen:!1,highlightedIndex:null})},handleInputFocus:function(){return this._ignoreBlur?void this.setIgnoreBlur(!1):(this._ignoreClick=!0,void this.setState({isOpen:!0}))},isInputFocused:function(){var t=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._ignoreClick||this.selectItemFromMouse(this.getFilteredItems()[this.state.highlightedIndex]),this._ignoreClick=!1},render:function(){var t=this;return this.props.debug&&p.push({id:p.length,state:this.state}),i.createElement("div",n({style:n({},this.props.wrapperStyle)},this.props.wrapperProps),i.createElement("input",n({},this.props.inputProps,{role:"combobox","aria-autocomplete":"list",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(p.slice(p.length-5,p.length),null,2)))}});t.exports=u}).call(e,function(){return this}())},function(e,o){e.exports=t},function(t,o){t.exports=e},function(t,e,o){t.exports=o(5)},function(t,e,o){function n(t,e,o){o=o||{},9===e.nodeType&&(e=i.getWindow(e));var n=o.allowHorizontalScroll,r=o.onlyScrollIfNeeded,s=o.alignWithTop,l=o.alignWithLeft;n=void 0===n?!0:n;var p,u,h,f,a,c,d,g,m,v,y=i.isWindow(e),w=i.offset(t),I=i.outerHeight(t),x=i.outerWidth(t);y?(d=e,v=i.height(d),m=i.width(d),g={left:i.scrollLeft(d),top:i.scrollTop(d)},a={left:w.left-g.left,top:w.top-g.top},c={left:w.left+x-(g.left+m),top:w.top+I-(g.top+v)},f=g):(p=i.offset(e),u=e.clientHeight,h=e.clientWidth,f={left:e.scrollLeft,top:e.scrollTop},a={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+h+(parseFloat(i.css(e,"borderRightWidth"))||0)),top:w.top+I-(p.top+u+(parseFloat(i.css(e,"borderBottomWidth"))||0))}),a.top<0||c.top>0?s===!0?i.scrollTop(e,f.top+a.top):s===!1?i.scrollTop(e,f.top+c.top):a.top<0?i.scrollTop(e,f.top+a.top):i.scrollTop(e,f.top+c.top):r||(s=void 0===s?!0:!!s,s?i.scrollTop(e,f.top+a.top):i.scrollTop(e,f.top+c.top)),n&&(a.left<0||c.left>0?l===!0?i.scrollLeft(e,f.left+a.left):l===!1?i.scrollLeft(e,f.left+c.left):a.left<0?i.scrollLeft(e,f.left+a.left):i.scrollLeft(e,f.left+c.left):r||(l=void 0===l?!0:!!l,l?i.scrollLeft(e,f.left+a.left):i.scrollLeft(e,f.left+c.left)))}var i=o(6);t.exports=n},function(t,e){function o(t){var e,o,n,i=t.ownerDocument,r=i.body,s=i&&i.documentElement;return e=t.getBoundingClientRect(),o=e.left,n=e.top,o-=s.clientLeft||r.clientLeft||0,n-=s.clientTop||r.clientTop||0,{left:o,top:n}}function n(t,e){var o=t["page"+(e?"Y":"X")+"Offset"],n="scroll"+(e?"Top":"Left");if("number"!=typeof o){var i=t.document;o=i.documentElement[n],"number"!=typeof o&&(o=i.body[n])}return o}function i(t){return n(t)}function r(t){return n(t,!0)}function s(t){var e=o(t),n=t.ownerDocument,s=n.defaultView||n.parentWindow;return e.left+=i(s),e.top+=r(s),e}function l(t,e,o){var n="",i=t.ownerDocument;return(o=o||i.defaultView.getComputedStyle(t,null))&&(n=o.getPropertyValue(e)||o[e]),n}function p(t,e){var o=t[S]&&t[S][e];if(x.test(o)&&!b.test(e)){var n=t.style,i=n[O],r=t[T][O];t[T][O]=t[S][O],n[O]="fontSize"===e?"1em":o||0,o=n.pixelLeft+C,n[O]=i,t[T][O]=r}return""===o?"auto":o}function u(t,e){"static"===v(t,"position")&&(t.style.position="relative");var o,n,i=s(t),r={};for(n in e)o=parseFloat(v(t,n))||0,r[n]=o+e[n]-i[n];v(t,r)}function h(t,e){for(var o=0;o<t.length;o++)e(t[o])}function f(t){return"border-box"===w(t,"boxSizing")}function a(t,e,o){var n,i={},r=t.style;for(n in e)i[n]=r[n],r[n]=e[n];o.call(t);for(n in e)r[n]=i[n]}function c(t,e,o){var n,i,r,s=0;for(i=0;i<e.length;i++)if(n=e[i])for(r=0;r<o.length;r++){var l;l="border"===n?n+o[r]+"Width":n+o[r],s+=parseFloat(w(t,l))||0}return s}function d(t){return null!=t&&t==t.window}function g(t,e,o){if(d(t))return"width"===e?F.viewportWidth(t):F.viewportHeight(t);if(9===t.nodeType)return"width"===e?F.docWidth(t):F.docHeight(t);var n="width"===e?["Left","Right"]:["Top","Bottom"],i="width"===e?t.offsetWidth:t.offsetHeight,r=w(t),s=f(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===o&&(o=s?L:R);var p=void 0!==i||s,u=i||l;return o===R?p?u-c(t,["border","padding"],n,r):l:p?u+(o===L?0:o===W?-c(t,["border"],n,r):c(t,["margin"],n,r)):l+c(t,P.slice(o),n,r)}function m(t){var e,o=arguments;return 0!==t.offsetWidth?e=g.apply(void 0,o):a(t,M,function(){e=g.apply(void 0,o)}),e}function v(t,e,o){if("object"!=typeof e)return"undefined"==typeof o?w(t,e):("number"==typeof o&&(o+="px"),void(t.style[e]=o));for(var n in e)v(t,n,e[n])}function y(t,e){for(var o in e)t[o]=e[o];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",O="left",C="px";"undefined"!=typeof window&&(w=window.getComputedStyle?l:p);var P=["margin","border","padding"],R=-1,W=2,L=1,D=0,F={};h(["Width","Height"],function(t){F["doc"+t]=function(e){var o=e.document;return Math.max(o.documentElement["scroll"+t],o.body["scroll"+t],F["viewport"+t](o))},F["viewport"+t]=function(e){var o="client"+t,n=e.document,i=n.body,r=n.documentElement,s=r[o];return"CSS1Compat"===n.compatMode&&s||i&&i[o]||s}});var M={position:"absolute",visibility:"hidden",display:"block"};h(["width","height"],function(t){var e=t.charAt(0).toUpperCase()+t.slice(1);F["outer"+e]=function(e,o){return e&&m(e,t,o?D:L)};var o="width"===t?["Left","Right"]:["Top","Bottom"];F[t]=function(e,n){if(void 0===n)return e&&m(e,t,R);if(e){var i=w(e),r=f(e);return r&&(n+=c(e,["padding","border"],o,i)),v(e,t,n)}}});var A=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 u(t,e)},isWindow:d,each:h,css:v,clone:function(t){var e={};for(var o in t)e[o]=t[o];var n=t.overflow;if(n)for(o in t)e.overflow[o]=t.overflow[o];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++)A.mix(t,arguments[e]);return t},viewportWidth:0,viewportHeight:0};y(A,F)}])});
 //# sourceMappingURL=react-autocomplete.min.js.map

lib/Autocomplete.js

@@ -22,2 +22,3 @@ const React = require('react')
     wrapperStyle: React.PropTypes.object,
+    autoHighlight: React.PropTypes.bool,
     debug: React.PropTypes.bool,
@@ -49,3 +50,4 @@ },
         maxHeight: '50%', // TODO: don't cheat, let it flow to the bottom
-      }
+      },
+      autoHighlight: true,
     }
@@ -219,3 +221,3 @@ },
   maybeAutoCompleteText () {
-    if (this.props.value === '')
+    if (!this.props.autoHighlight || this.props.value === '')
       return
@@ -262,3 +264,2 @@ var { highlightedIndex } = this.state
       this.refs.input.focus()
-      this.setIgnoreBlur(false)
     })
@@ -279,3 +280,3 @@ },
       return React.cloneElement(element, {
-        onMouseDown: () => this.setIgnoreBlur(true),
+        onMouseDown: () => this.setIgnoreBlur(true), // Ignore blur to prevent menu from de-rendering before we can process click
         onMouseEnter: () => this.highlightItemFromMouse(index),
@@ -305,4 +306,6 @@ onClick: () => this.selectItemFromMouse(item),
   handleInputFocus () {
-    if (this._ignoreBlur)
+    if (this._ignoreBlur) {
+      this.setIgnoreBlur(false)
       return
+    }
     // We don't want `selectItemFromMouse` to trigger when
@@ -309,0 +312,0 @@ // the user clicks into the input to focus it, so set this

package.json

 {
   "name": "react-autocomplete",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "Accessible, extensible, Autocomplete for React.js",
@@ -17,2 +17,3 @@ "main": "./build/lib/index.js",
     "lint": "eslint lib examples",
+    "pretest": "npm run lint",
     "test": "jest",
@@ -19,0 +20,0 @@ "coverage": "jest --coverage",

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

247672

increased by0.82%

Lines of code

2149

increased by0.56%

No dependency changes