react-tag-autocomplete - npm Package Compare versions

Comparing version 5.5.1 to 5.6.0

CHANGELOG.md

 # Changelog
 
+## 5.6.0
+
+- Added `inputAttributes` option ([juliettepretot](https://github.com/juliettepretot))
+
 ## 5.5.0
@@ -4,0 +8,0 @@

dist-es5/Input.js

@@ -81,2 +81,3 @@ 'use strict'
     var ref = this.props;
+    var inputAttributes = ref.inputAttributes;
     var query = ref.query;
@@ -90,4 +91,3 @@ var placeholder = ref.placeholder;
       React.createElement( 'div', { className: this.props.classNames.searchInput },
-        React.createElement( 'input', {
-          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, { 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)
@@ -94,0 +94,0 @@ )

dist-es5/ReactTags.js

@@ -181,3 +181,3 @@ 'use strict'
           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, { 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( 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( 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 }))
@@ -204,3 +204,4 @@ )
   allowBackspace: true,
-  tagComponent: null
+  tagComponent: null,
+  inputAttributes: {}
 }
@@ -229,5 +230,6 @@
     PropTypes.element
-  ])
+  ]),
+  inputAttributes: PropTypes.object
 }
 
 module.exports = ReactTags

dist-es6/Input.js

@@ -72,8 +72,7 @@ 'use strict'
   render () {
-    const { query, placeholder, expandable, listboxId, selectedIndex } = this.props
+    const { inputAttributes, query, placeholder, expandable, listboxId, selectedIndex } = this.props
 
     return (
       React.createElement( 'div', { className: this.props.classNames.searchInput },
-        React.createElement( 'input', {
-          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, { 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 +79,0 @@ )

dist-es6/ReactTags.js

@@ -171,3 +171,3 @@ 'use strict'
           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, { ref: (c) => { this.input = c }, listboxId: listboxId, autofocus: this.props.autofocus, autoresize: this.props.autoresize, expandable: expandable, placeholder: this.props.placeholder })),
+          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( 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 }))
@@ -192,3 +192,4 @@ )
   allowBackspace: true,
-  tagComponent: null
+  tagComponent: null,
+  inputAttributes: {}
 }
@@ -217,5 +218,6 @@
     PropTypes.element
-  ])
+  ]),
+  inputAttributes: PropTypes.object
 }
 
 module.exports = ReactTags

lib/Input.js

@@ -72,7 +72,7 @@ 'use strict'
   render () {
-    const { query, placeholder, expandable, listboxId, selectedIndex } = this.props
+    const { inputAttributes, query, placeholder, expandable, listboxId, selectedIndex } = this.props
 
     return (
       <div className={this.props.classNames.searchInput}>
-        <input
+        <input {...inputAttributes}
           ref={(c) => { this.input = c }}
@@ -79,0 +79,0 @@ value={query}

lib/ReactTags.js

@@ -179,2 +179,3 @@ 'use strict'
           <Input {...this.state}
+            inputAttributes={this.props.inputAttributes}
             ref={(c) => { this.input = c }}
@@ -211,3 +212,4 @@ listboxId={listboxId}
   allowBackspace: true,
-  tagComponent: null
+  tagComponent: null,
+  inputAttributes: {}
 }
@@ -236,5 +238,6 @@
     PropTypes.element
-  ])
+  ]),
+  inputAttributes: PropTypes.object
 }
 
 module.exports = ReactTags

package.json

 {
   "name": "react-tag-autocomplete",
-  "version": "5.5.1",
+  "version": "5.6.0",
   "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",

README.md

@@ -87,2 +87,3 @@ # React Tag Autocomplete
 - [`tagComponent`](#tagcomponent-optional)
+- [`inputAttributes`](#inputAttributes-optional)
 
@@ -218,2 +219,8 @@ #### tags (optional)
 
+#### inputAttributes (optional)
+
+An object containing additional attributes that will be applied to the underlying `<input />` field.
+
+As an example `inputAttributes={{ maxLength: 10 }}` would be applied as `<input maxlength="10" … />`. Note this prop won't overwrite existing attributes, it can only add new ones.
+
 ### Styling
@@ -220,0 +227,0 @@

Fixed alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

603562

increased by66.12%

Number of lines in readme file

266

increased by2.7%

Number of low supply chain risk alerts

1

decreased by-50%

Worsened metrics

Number of package files

22

decreased by-15.38%

Lines of code

1660

decreased by-39.13%

No dependency changes