react-tag-autocomplete - npm Package Compare versions

Comparing version 5.7.0 to 5.7.1

CHANGELOG.md

 # Changelog
 
+## 5.7.1
+
+- Fixed missing `onChange` attribute warnings in development mode
+
 ## 5.7.0
@@ -4,0 +8,0 @@

dist-es5/Input.js

@@ -43,3 +43,3 @@ 'use strict'
 
-  Input.prototype.componentDidUpdate = function componentDidUpdate (prevProps) {
+  Input.prototype.componentDidUpdate = function componentDidUpdate () {
     this.updateInputWidth()
@@ -83,2 +83,3 @@ };
     var inputAttributes = ref.inputAttributes;
+    var inputEventHandlers = ref.inputEventHandlers;
     var query = ref.query;
@@ -92,3 +93,4 @@ var placeholder = ref.placeholder;
       React.createElement( 'div', { className: this.props.classNames.searchInput },
-        React.createElement( 'input', Object.assign({}, inputAttributes, { ref: function (c) { this$1.input = c }, value: query, placeholder: placeholder, role: 'combobox', 'aria-autocomplete': 'list', 'aria-label': placeholder, 'aria-owns': listboxId, 'aria-activedescendant': selectedIndex > -1 ? (listboxId + "-" + selectedIndex) : null, 'aria-expanded': expandable, style: { width: this.state.inputWidth } })),
+        React.createElement( 'input', Object.assign({},
+          inputAttributes, inputEventHandlers, { ref: function (c) { this$1.input = c }, value: query, placeholder: placeholder, role: 'combobox', 'aria-autocomplete': 'list', 'aria-label': placeholder, 'aria-owns': listboxId, 'aria-activedescendant': selectedIndex > -1 ? (listboxId + "-" + selectedIndex) : null, 'aria-expanded': expandable, style: { width: this.state.inputWidth } })),
         React.createElement( 'div', { ref: function (c) { this$1.sizer = c }, style: SIZER_STYLES }, query || placeholder)
@@ -95,0 +97,0 @@ )

dist-es5/ReactTags.js

@@ -41,2 +41,13 @@ 'use strict'
     }
+
+    this.inputEventHandlers = {
+      // Provide a no-op function to the input component to avoid warnings
+      // <https://github.com/i-like-robots/react-tags/issues/135>
+      // <https://github.com/facebook/react/issues/13835>
+      onChange: function () {},
+      onBlur: this.handleBlur.bind(this),
+      onFocus: this.handleFocus.bind(this),
+      onInput: this.handleInput.bind(this),
+      onKeyDown: this.handleKeyDown.bind(this)
+    }
   }
@@ -192,5 +203,4 @@
         ),
-        React.createElement( 'div', {
-          className: this.state.classNames.search, onBlurCapture: this.handleBlur.bind(this), onFocusCapture: this.handleFocus.bind(this), onInput: this.handleInput.bind(this), onKeyDown: this.handleKeyDown.bind(this) },
-          React.createElement( Input, Object.assign({}, this.state, { inputAttributes: this.props.inputAttributes, ref: function (c) { this$1.input = c }, listboxId: listboxId, autofocus: this.props.autofocus, autoresize: this.props.autoresize, expandable: expandable, placeholder: this.props.placeholder })),
+        React.createElement( 'div', { className: this.state.classNames.search },
+          React.createElement( Input, Object.assign({}, this.state, { inputAttributes: this.props.inputAttributes, inputEventHandlers: this.inputEventHandlers, ref: function (c) { this$1.input = c }, listboxId: listboxId, autofocus: this.props.autofocus, autoresize: this.props.autoresize, expandable: expandable, placeholder: this.props.placeholder })),
           React.createElement( Suggestions, Object.assign({}, this.state, { ref: function (c) { this$1.suggestions = c }, listboxId: listboxId, expandable: expandable, suggestions: this.props.suggestions, addTag: this.addTag.bind(this), maxSuggestionsLength: this.props.maxSuggestionsLength }))
@@ -197,0 +207,0 @@ )

dist-es6/Input.js

@@ -39,3 +39,3 @@ 'use strict'
 
-  componentDidUpdate (prevProps) {
+  componentDidUpdate () {
     this.updateInputWidth()
@@ -73,7 +73,8 @@ }
   render () {
-    const { inputAttributes, query, placeholder, expandable, listboxId, selectedIndex } = this.props
+    const { inputAttributes, inputEventHandlers, query, placeholder, expandable, listboxId, selectedIndex } = this.props
 
     return (
       React.createElement( 'div', { className: this.props.classNames.searchInput },
-        React.createElement( 'input', Object.assign({}, inputAttributes, { ref: (c) => { this.input = c }, value: query, placeholder: placeholder, role: 'combobox', 'aria-autocomplete': 'list', 'aria-label': placeholder, 'aria-owns': listboxId, 'aria-activedescendant': selectedIndex > -1 ? `${listboxId}-${selectedIndex}` : null, 'aria-expanded': expandable, style: { width: this.state.inputWidth } })),
+        React.createElement( 'input', Object.assign({},
+          inputAttributes, inputEventHandlers, { ref: (c) => { this.input = c }, value: query, placeholder: placeholder, role: 'combobox', 'aria-autocomplete': 'list', 'aria-label': placeholder, 'aria-owns': listboxId, 'aria-activedescendant': selectedIndex > -1 ? `${listboxId}-${selectedIndex}` : null, 'aria-expanded': expandable, style: { width: this.state.inputWidth } })),
         React.createElement( 'div', { ref: (c) => { this.sizer = c }, style: SIZER_STYLES }, query || placeholder)
@@ -80,0 +81,0 @@ )

dist-es6/ReactTags.js

@@ -41,2 +41,13 @@ 'use strict'
     }
+
+    this.inputEventHandlers = {
+      // Provide a no-op function to the input component to avoid warnings
+      // <https://github.com/i-like-robots/react-tags/issues/135>
+      // <https://github.com/facebook/react/issues/13835>
+      onChange: () => {},
+      onBlur: this.handleBlur.bind(this),
+      onFocus: this.handleFocus.bind(this),
+      onInput: this.handleInput.bind(this),
+      onKeyDown: this.handleKeyDown.bind(this)
+    }
   }
@@ -180,5 +191,4 @@
         ),
-        React.createElement( 'div', {
-          className: this.state.classNames.search, onBlurCapture: this.handleBlur.bind(this), onFocusCapture: this.handleFocus.bind(this), onInput: this.handleInput.bind(this), onKeyDown: this.handleKeyDown.bind(this) },
-          React.createElement( Input, Object.assign({}, this.state, { inputAttributes: this.props.inputAttributes, ref: (c) => { this.input = c }, listboxId: listboxId, autofocus: this.props.autofocus, autoresize: this.props.autoresize, expandable: expandable, placeholder: this.props.placeholder })),
+        React.createElement( 'div', { className: this.state.classNames.search },
+          React.createElement( Input, Object.assign({}, this.state, { inputAttributes: this.props.inputAttributes, inputEventHandlers: this.inputEventHandlers, ref: (c) => { this.input = c }, listboxId: listboxId, autofocus: this.props.autofocus, autoresize: this.props.autoresize, expandable: expandable, placeholder: this.props.placeholder })),
           React.createElement( Suggestions, Object.assign({}, this.state, { ref: (c) => { this.suggestions = c }, listboxId: listboxId, expandable: expandable, suggestions: this.props.suggestions, addTag: this.addTag.bind(this), maxSuggestionsLength: this.props.maxSuggestionsLength }))
@@ -185,0 +195,0 @@ )

lib/Input.js

@@ -39,3 +39,3 @@ 'use strict'
 
-  componentDidUpdate (prevProps) {
+  componentDidUpdate () {
     this.updateInputWidth()
@@ -73,7 +73,9 @@ }
   render () {
-    const { inputAttributes, query, placeholder, expandable, listboxId, selectedIndex } = this.props
+    const { inputAttributes, inputEventHandlers, query, placeholder, expandable, listboxId, selectedIndex } = this.props
 
     return (
       <div className={this.props.classNames.searchInput}>
-        <input {...inputAttributes}
+        <input
+          {...inputAttributes}
+          {...inputEventHandlers}
           ref={(c) => { this.input = c }}
@@ -80,0 +82,0 @@ value={query}

lib/ReactTags.js

@@ -41,2 +41,13 @@ 'use strict'
     }
+
+    this.inputEventHandlers = {
+      // Provide a no-op function to the input component to avoid warnings
+      // <https://github.com/i-like-robots/react-tags/issues/135>
+      // <https://github.com/facebook/react/issues/13835>
+      onChange: () => {},
+      onBlur: this.handleBlur.bind(this),
+      onFocus: this.handleFocus.bind(this),
+      onInput: this.handleInput.bind(this),
+      onKeyDown: this.handleKeyDown.bind(this)
+    }
   }
@@ -183,10 +194,6 @@
         </div>
-        <div
-          className={this.state.classNames.search}
-          onBlurCapture={this.handleBlur.bind(this)}
-          onFocusCapture={this.handleFocus.bind(this)}
-          onInput={this.handleInput.bind(this)}
-          onKeyDown={this.handleKeyDown.bind(this)}>
+        <div className={this.state.classNames.search}>
           <Input {...this.state}
             inputAttributes={this.props.inputAttributes}
+            inputEventHandlers={this.inputEventHandlers}
             ref={(c) => { this.input = c }}
@@ -193,0 +200,0 @@ listboxId={listboxId}

package.json

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

No alert changes

Improved metrics

Total package byte prevSize

461923

increased by0.25%

Lines of code

1686

increased by1.75%

No dependency changes