Make listbox ID configurable via top-level prop

Author: i-like-robots

README.md

@@ -68,6 +68,7 @@ ReactDOM.render(<App />, document.getElementById('app'))
 
 ### Options
 
+- [`id`](#id-optional)
 - [`tags`](#tags-optional)
 - [`suggestions`](#suggestions-optional)
 - [`placeholder`](#placeholder-optional)
@@ -85,6 +86,10 @@ ReactDOM.render(<App />, document.getElementById('app'))
 - [`allowBackspace`](#allowbackspace-optional)
 - [`tagComponent`](#tagcomponent-optional)
 
+#### id (optional)
+
+The ID attribute given to the listbox element. Default: `ReactTags`.
+
 #### tags (optional)
 
 An array of tags that are displayed as pre-selected. Each tag must have an `id` and a `name` property. Default: `[]`.

lib/Input.js

@@ -63,19 +63,19 @@ class Input extends React.Component {
   }
 
   render () {
-    const { query, placeholder, expanded, listboxId, index } = this.props
+    const { id, query, placeholder, expanded, classNames, index } = this.props
 
     return (
-      <div className={this.props.classNames.searchInput}>
+      <div className={classNames.searchInput}>
         <input
           ref={(c) => { this.input = c }}
           value={query}
           placeholder={placeholder}
           role='combobox'
           aria-autocomplete='list'
           aria-label={placeholder}
-          aria-owns={listboxId}
-          aria-activedescendant={index > -1 ? `${listboxId}-${index}` : null}
+          aria-owns={id}
+          aria-activedescendant={index > -1 ? `${id}-${index}` : null}
           aria-expanded={expanded}
           style={{ width: this.state.inputWidth }} />
         <div ref={(c) => { this.sizer = c }} style={SIZER_STYLES}>{query || placeholder}</div>

lib/ReactTags.js

@@ -171,8 +171,6 @@ class ReactTags extends React.Component {
   }
 
   render () {
-    const listboxId = 'ReactTags-listbox'
-
     const TagComponent = this.props.tagComponent || Tag
 
     const tags = this.props.tags.map((tag, i) => (
@@ -190,7 +188,10 @@ class ReactTags extends React.Component {
 
     return (
       <div className={classNames.join(' ')} onClick={this.onClick.bind(this)}>
-        <div className={this.state.classNames.selected} aria-live='polite' aria-relevant='additions removals'>
+        <div
+          className={this.state.classNames.selected}
+          aria-relevant='additions removals'
+          aria-live='polite'>
           {tags}
         </div>
         <div
@@ -200,14 +201,14 @@ class ReactTags extends React.Component {
           onKeyDown={this.onKeyDown.bind(this)}
           onInput={this.onInput.bind(this)}>
           <Input {...this.state}
+            id={this.props.id}
             ref={(c) => { this.input = c }}
-            listboxId={listboxId}
             autoresize={this.props.autoresize}
             expanded={expanded}
             placeholder={this.props.placeholder} />
           <Suggestions {...this.state}
+            id={this.props.id}
             ref={(c) => { this.suggestions = c }}
-            listboxId={listboxId}
             expanded={expanded}
             addTag={this.addTag.bind(this)} />
         </div>
@@ -217,6 +218,7 @@ class ReactTags extends React.Component {
 }
 
 ReactTags.defaultProps = {
+  id: 'ReactTags',
   tags: [],
   placeholder: 'Add new tag',
   suggestions: [],
@@ -230,6 +232,7 @@ ReactTags.defaultProps = {
 }
 
 ReactTags.propTypes = {
+  id: PropTypes.string,
   tags: PropTypes.arrayOf(PropTypes.object),
   placeholder: PropTypes.string,
   suggestions: PropTypes.arrayOf(PropTypes.object),

lib/Suggestions.js

@@ -18,11 +18,11 @@ class Suggestions extends React.Component {
       return null
     }
 
-    const options = this.props.options.map((item, i) => {
-      const key = `${this.props.listboxId}-${i}`
+    const options = this.props.options.map((item, index) => {
+      const key = `${this.props.id}-${index}`
       const classNames = []
 
-      if (this.props.index === i) {
+      if (this.props.index === index) {
         classNames.push(this.props.classNames.suggestionActive)
       }
 
@@ -45,7 +45,7 @@ class Suggestions extends React.Component {
 
     return (
       <div className={this.props.classNames.suggestions}>
-        <ul role='listbox' id={this.props.listboxId}>{options}</ul>
+        <ul role='listbox' id={this.props.id}>{options}</ul>
       </div>
     )
   }