react-select-search - npm Package Compare versions

Comparing version 0.5.2 to 0.5.3

dist/index.js

@@ -461,2 +461,4 @@ 'use strict';
         value: function chooseOption(value) {
+            var _this3 = this;
+
             var currentValue = this.state.value;
@@ -496,5 +498,8 @@ var option = void 0;
 
-            this.props.onChange.call(null, this.publishOption(currentValue), this.state, this.props);
             this.setState({ value: currentValue, search: search, options: options, highlighted: highlighted, focus: this.props.multiple });
 
+            setTimeout(function () {
+                _this3.props.onChange.call(null, _this3.publishOption(currentValue), _this3.state, _this3.props);
+            }, 50);
+
             if (this.props.search && !this.props.multiple) {
@@ -507,2 +512,4 @@ this.refs.search.blur();
         value: function removeOption(value) {
+            var _this4 = this;
+
             if (!value) {
@@ -521,4 +528,7 @@ return false;
 
-            this.props.onChange.call(null, this.publishOption(value), this.state, this.props);
             this.setState({ value: value, search: '' });
+
+            setTimeout(function () {
+                _this4.props.onChange.call(null, _this4.publishOption(value), _this4.state, _this4.props);
+            }, 50);
         }
@@ -559,3 +569,3 @@ }, {
         value: function renderOptions() {
-            var _this3 = this;
+            var _this5 = this;
 
@@ -569,18 +579,18 @@ var select = null;
                 foundOptions.forEach(function (element, i) {
-                    var className = _this3.classes.option;
+                    var className = _this5.classes.option;
 
-                    if (_this3.state.highlighted === i) {
-                        className += ' ' + _Bem2.default.m(_this3.classes.option, 'hover');
+                    if (_this5.state.highlighted === i) {
+                        className += ' ' + _Bem2.default.m(_this5.classes.option, 'hover');
                     }
 
-                    if (_this3.props.multiple && _this3.state.value.indexOf(element.value) >= 0 || element.value === _this3.state.value) {
-                        className += ' ' + _Bem2.default.m(_this3.classes.option, 'selected');
+                    if (_this5.props.multiple && _this5.state.value.indexOf(element.value) >= 0 || element.value === _this5.state.value) {
+                        className += ' ' + _Bem2.default.m(_this5.classes.option, 'selected');
                     }
 
-                    if (_this3.props.multiple) {
-                        if (_this3.state.value.indexOf(element.value) < 0) {
+                    if (_this5.props.multiple) {
+                        if (_this5.state.value.indexOf(element.value) < 0) {
                             options.push(_react2.default.createElement(
                                 'li',
-                                { className: className, onClick: _this3.chooseOption.bind(_this3, element.value), key: element.value + '-option', 'data-value': element.value },
-                                _this3.props.renderOption(element, _this3.state, _this3.props)
+                                { className: className, onClick: _this5.chooseOption.bind(_this5, element.value), key: element.value + '-option', 'data-value': element.value },
+                                _this5.props.renderOption(element, _this5.state, _this5.props)
                             ));
@@ -590,12 +600,12 @@ } else {
                                 'li',
-                                { className: className, onClick: _this3.removeOption.bind(_this3, element.value), key: element.value + '-option', 'data-value': element.value },
-                                _this3.props.renderOption(element, _this3.state, _this3.props)
+                                { className: className, onClick: _this5.removeOption.bind(_this5, element.value), key: element.value + '-option', 'data-value': element.value },
+                                _this5.props.renderOption(element, _this5.state, _this5.props)
                             ));
                         }
                     } else {
-                        if (element.value === _this3.state.value) {
+                        if (element.value === _this5.state.value) {
                             options.push(_react2.default.createElement(
                                 'li',
                                 { className: className, key: element.value + '-option', 'data-value': element.value },
-                                _this3.props.renderOption(element)
+                                _this5.props.renderOption(element)
                             ));
@@ -605,4 +615,4 @@ } else {
                                 'li',
-                                { className: className, onClick: _this3.chooseOption.bind(_this3, element.value), key: element.value + '-option', 'data-value': element.value },
-                                _this3.props.renderOption(element, _this3.state, _this3.props)
+                                { className: className, onClick: _this5.chooseOption.bind(_this5, element.value), key: element.value + '-option', 'data-value': element.value },
+                                _this5.props.renderOption(element, _this5.state, _this5.props)
                             ));
@@ -641,3 +651,3 @@ }
         value: function renderOutElement() {
-            var _this4 = this;
+            var _this6 = this;
 
@@ -652,3 +662,3 @@ var option = null;
 
-                        _this4.state.value.forEach(function (value, i) {
+                        _this6.state.value.forEach(function (value, i) {
                             option = this.findByValue(this.state.defaultOptions, value);
@@ -660,7 +670,7 @@ finalValueOptions.push(_react2.default.createElement(
                             ));
-                        }.bind(_this4));
+                        }.bind(_this6));
 
                         outElement = _react2.default.createElement(
                             'select',
-                            { value: _this4.state.value, className: _this4.classes.out, name: _this4.props.name, readOnly: true, multiple: true },
+                            { value: _this6.state.value, className: _this6.classes.out, name: _this6.props.name, readOnly: true, multiple: true },
                             finalValueOptions
@@ -691,3 +701,3 @@ );
 
-                    outElement = _react2.default.createElement('input', { type: 'text', onFocus: this.bound.onFocus, style: outStyle, defaultValue: this.state.value, ref: 'outInput', name: this.props.name });
+                    outElement = _react2.default.createElement('input', { type: 'text', onFocus: this.bound.onFocus, style: outStyle, value: this.state.value, readOnly: true, ref: 'outInput', name: this.props.name });
                 }
@@ -694,0 +704,0 @@ }

package.json

 {
   "name": "react-select-search",
-  "version": "0.5.2",
+  "version": "0.5.3",
   "description": "React powered selectbox with filter",
@@ -5,0 +5,0 @@ "main": "dist/index.js",

src/index.js

@@ -431,5 +431,8 @@ import React from 'react';
 
-        this.props.onChange.call(null, this.publishOption(currentValue), this.state, this.props);
         this.setState({value: currentValue, search: search, options: options, highlighted: highlighted, focus: this.props.multiple});
 
+        setTimeout(() => {
+            this.props.onChange.call(null, this.publishOption(currentValue), this.state, this.props);
+        }, 50);
+
         if (this.props.search && !this.props.multiple) {
@@ -454,4 +457,7 @@ this.refs.search.blur();
 
-        this.props.onChange.call(null, this.publishOption(value), this.state, this.props);
         this.setState({value: value, search: ''});
+        
+        setTimeout(() => {
+            this.props.onChange.call(null, this.publishOption(value), this.state, this.props);
+        }, 50);
     }
@@ -582,3 +588,3 @@
 
-                outElement = <input type="text" onFocus={this.bound.onFocus} style={outStyle} defaultValue={this.state.value} ref="outInput" name={this.props.name} />;
+                outElement = <input type="text" onFocus={this.bound.onFocus} style={outStyle} value={this.state.value} readOnly={true} ref="outInput" name={this.props.name} />;
             }
@@ -585,0 +591,0 @@ }

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

56956

increased by0.58%

Lines of code

1211

increased by0.83%

No dependency changes