react-tag-autocomplete - npm Package Compare versions

Comparing version 3.5.1 to 3.6.0

dist/Input.js

@@ -28,11 +28,9 @@ 'use strict';
         this.setState({
-            inputWidth: Math.max(this.refs.sizer.scrollWidth) + 2
+            inputWidth: Math.max(this.sizer.scrollWidth) + 2
         });
     },
 
-    focus: function focus() {
-        this.refs.input.focus();
-    },
+    render: function render() {
+        var _this = this;
 
-    render: function render() {
         var _props = this.props;
@@ -47,4 +45,8 @@ var value = _props.value;
             null,
-            React.createElement('input', _extends({ ref: 'input' }, this.props, { style: style })),
-            React.createElement('input', { ref: 'sizer', readOnly: true, value: value || placeholder, 'aria-hidden': 'true' })
+            React.createElement('input', _extends({ ref: function (c) {
+                    return _this.input = c;
+                } }, this.props, { style: style })),
+            React.createElement('input', { ref: function (c) {
+                    return _this.sizer = c;
+                }, readOnly: true, value: value || placeholder, 'aria-hidden': 'true' })
         );
@@ -51,0 +53,0 @@ }

dist/ReactTags.js

@@ -59,3 +59,3 @@ 'use strict';
         if (this.props.autofocus) {
-            this.refs.input.focus();
+            this.refs.input.input.focus();
         }
@@ -159,2 +159,8 @@ },
 
+    handleClick: function handleClick(e) {
+        if (document.activeElement !== e.target) {
+            this.refs.input.input.focus();
+        }
+    },
+
     addTag: function addTag(tag) {
@@ -174,3 +180,3 @@ if (tag.disabled) {
         // focus back on the input box
-        this.refs.input.focus();
+        this.refs.input.input.focus();
     },
@@ -203,3 +209,3 @@
             'div',
-            { className: 'ReactTags' },
+            { className: 'ReactTags', onClick: this.handleClick },
             React.createElement(
@@ -206,0 +212,0 @@ 'div',

lib/Input.js

@@ -25,10 +25,6 @@ 'use strict';
         this.setState({
-            inputWidth: Math.max(this.refs.sizer.scrollWidth) + 2
+            inputWidth: Math.max(this.sizer.scrollWidth) + 2
         });
     },
 
-    focus() {
-        this.refs.input.focus();
-    },
-
     render() {
@@ -40,4 +36,4 @@ const { value, placeholder } = this.props;
             <div>
-                <input ref='input' {...this.props} style={style} />
-                <input ref='sizer' readOnly value={value || placeholder} aria-hidden='true' />
+                <input ref={(c) => this.input = c} {...this.props} style={style} />
+                <input ref={(c) => this.sizer = c} readOnly value={value || placeholder} aria-hidden='true' />
             </div>
@@ -44,0 +40,0 @@ );

lib/ReactTags.js

@@ -54,3 +54,3 @@ const React = require('react');
         if (this.props.autofocus) {
-            this.refs.input.focus();
+            this.refs.input.input.focus();
         }
@@ -149,2 +149,8 @@ },
 
+    handleClick(e) {
+        if (document.activeElement !== e.target) {
+            this.refs.input.input.focus();
+        }
+    },
+
     addTag(tag) {
@@ -164,3 +170,3 @@ if (tag.disabled) {
         // focus back on the input box
-        this.refs.input.focus();
+        this.refs.input.input.focus();
     },
@@ -185,3 +191,3 @@
         return (
-            <div className='ReactTags'>
+            <div className='ReactTags' onClick={this.handleClick}>
                 <div className='ReactTags__selected' aria-live='polite' aria-relevant='additions removals'>
@@ -188,0 +194,0 @@ {tagItems}

package.json

 {
   "name": "react-tag-autocomplete",
-  "version": "3.5.1",
+  "version": "3.6.0",
   "description": "React Tag Autocomplete is a simple tagging component ready to drop in your React projects.",
@@ -5,0 +5,0 @@ "main": "dist/ReactTags.js",

webpack.config.js

@@ -8,5 +8,10 @@ const webpack = require('webpack');
         loaders: [
-            { test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/ }
+            { test: /\.js$/, loader: 'babel', exclude: /node_modules/ }
         ]
     },
+    plugins: [
+        new webpack.DefinePlugin({
+            'process.env': { 'NODE_ENV': '"production"' }
+        })
+    ],
     output: {
@@ -13,0 +18,0 @@ filename: "example/bundle.js"

No alert changes

Worsened metrics

Total package byte prevSize

1762840

decreased by-7.93%

Lines of code

1361

decreased by-11.39%

No dependency changes