Merge pull request #18 from AmyShackles/add/ability-to-specify-id

Add ability to specify id

Author: AmyShackles

README.md

@@ -59,20 +59,22 @@ const ExampleClient = () => {
 ## AutoSuggest props:
 | propName | Description |
 | --- | --- |
-| **type** | Passing "server" will tell the component to render an AutoSuggestServer component.  If a type is not passed and a url argument is passed, the component infers the type to be server.  If no type is passed (or a type other than "server" is passed), AutoSuggestClient component is rendered. |
-| **name** | name used for the autosuggest input label and the ids of nested elements |
+| **id** | value used to generate ids of nested elements |
+| **type** | passing "server" will tell the component to render an AutoSuggestServer component.  If a type is not passed and a url argument is passed, the component infers the type to be server.  If no type is passed (or a type other than "server" is passed), AutoSuggestClient component is rendered. |
+| **name** | name used for the autosuggest input label.  If `id` prop is not provided, the `name` prop is used for generating the ids of nested elements |
 | **url** | endpoint to query to generate the suggestions list.  Component expects the url to accept input text as a parameter, not query.<br><br>Example:<br>With "https://ntsb-server.herokuapp.com/api/accidents/makeList" as the url,<br>if a user typed 'Bo' into the input field, a request would be sent to<br>https://ntsb-server.herokuapp.com/api/accidents/makeList/Bo) |
-| **debounceTime** | The amount of milliseconds to wait before sending requests to url based on input |
-| **styles** |  An object to customize the appearance of the AutoSuggest component |
+| **debounceTime** | the amount of milliseconds to wait before sending requests to url based on input |
+| **styles** |  an object to customize the appearance of the AutoSuggest component |
 | **options** | The array of options if the autosuggest is created using a list of items already in the application |
-| **handleChange** | Array for updating the text in the autosuggest field |
-| **value** | The value of the autosuggest field |
-| **caseInsensitive** | Setting for Client version of AutoSuggest, whether to perform case-insensitive matches against the options array |
+| **handleChange** | array for updating the text in the autosuggest field |
+| **value** | the value of the autosuggest field |
+| **caseInsensitive** | setting for Client version of AutoSuggest, whether to perform case-insensitive matches against the options array |
 
 
 ## AutoSuggest Default Props
 | propName | type | defaultValue |
 | --- | --- | --- |
+| **id** | string | "" |
 | **type** | string | "" |
 | **name** | string | "Search" |
 | **url** | string | "" |
@@ -106,7 +108,7 @@ Using our earlier example
 
 ```jsx
     <form onSubmit={handleSubmit}>
-        <AutoSuggest name="Make" url="https://ntsb-server.herokuapp.com/api/accidents/makeList" handleChange={setMake} value={make}/>
+        <AutoSuggest id="desktop-make" name="Make" url="https://ntsb-server.herokuapp.com/api/accidents/makeList" handleChange={setMake} value={make}/>
         <button>Submit</button>
     </form>
 ```
@@ -115,23 +117,23 @@ If the user entered "brau" into the input field, the resulting html would look l
 
 ```html
 <form>
-    <div id="Make-announcement" class="visually-hidden" aria-live="polite" style="position: absolute; clip: rect(0px, 0px, 0px, 0px); clip-path: inset(50%); height: 1px; width: 1px; overflow: hidden;">4 suggestions displayed.  To navigate, use up and down arrow keys.
+    <div id="desktop-make-announcement" class="visually-hidden" aria-live="polite" style="position: absolute; clip: rect(0px, 0px, 0px, 0px); clip-path: inset(50%); height: 1px; width: 1px; overflow: hidden;">4 suggestions displayed.  To navigate, use up and down arrow keys.
     </div>
     <div>
-        <div id="Make-searchField" role="combobox" aria-expanded="true" aria-owns="Make-input" aria-haspopup="listbox" aria-controls="Make-autosuggest-options" style="display: inline-block;">
-            <label for="Make-input" style="display: block; font-size: 1.35rem;">Make
+        <div id="desktop-make-searchField" role="combobox" aria-expanded="true" aria-owns="desktop-make-input" aria-haspopup="listbox" aria-controls="desktop-make-autosuggest-options" style="display: inline-block;">
+            <label for="desktop-make-input" style="display: block; font-size: 1.35rem;">Make
             </label>
-            <input id="Make-input" type="text" class="searchfield" autocomplete="off" aria-autocomplete="both" value="brau" style="padding: 0.5rem; border: 2px solid rgb(200, 200, 200); background-color: rgb(255, 255, 255); border-radius: 6px; color: rgb(0, 0, 0); font-weight: normal; font-size: 1.35rem; margin: 0px auto; width: 19rem; outline: none;">
+            <input id="desktop-make-input" type="text" class="searchfield" autocomplete="off" aria-autocomplete="both" value="brau" style="padding: 0.5rem; border: 2px solid rgb(200, 200, 200); background-color: rgb(255, 255, 255); border-radius: 6px; color: rgb(0, 0, 0); font-weight: normal; font-size: 1.35rem; margin: 0px auto; width: 19rem; outline: none;">
         </div>
-        <div class="autocompleteSuggestions" id="Make-autocomplete" style="display: block; position: absolute; border: 1px solid rgb(153, 153, 153); background: rgb(255, 255, 255); width: 20rem;">
-            <ul id="Make-autosuggest-options" role="listbox" style="margin: 0px; padding: 0px; list-style: none;">
-                <li role="option" id="Make-suggestion0" aria-selected="false" class="auto-suggestions" style="margin: 0px; padding: 0.5rem; font-size: 1.35rem; white-space: nowrap; overflow: hidden; cursor: default;">BRAUCH
+        <div class="autocompleteSuggestions" id="desktop-make-autocomplete" style="display: block; position: absolute; border: 1px solid rgb(153, 153, 153); background: rgb(255, 255, 255); width: 20rem;">
+            <ul id="desktop-make-autosuggest-options" role="listbox" style="margin: 0px; padding: 0px; list-style: none;">
+                <li role="option" id="desktop-make-suggestion-0" aria-selected="false" class="auto-suggestions" style="margin: 0px; padding: 0.5rem; font-size: 1.35rem; white-space: nowrap; overflow: hidden; cursor: default;">BRAUCH
                 </li>
-                <li role="option" id="Make-suggestion1" aria-selected="false" class="auto-suggestions" style="margin: 0px; padding: 0.5rem; font-size: 1.35rem; white-space: nowrap; overflow: hidden; cursor: default;">BRAULT GLASAIR
+                <li role="option" id="desktop-make-suggestion-1" aria-selected="false" class="auto-suggestions" style="margin: 0px; padding: 0.5rem; font-size: 1.35rem; white-space: nowrap; overflow: hidden; cursor: default;">BRAULT GLASAIR
                 </li>
-                <li role="option" id="Make-suggestion2" aria-selected="false" class="auto-suggestions" style="margin: 0px; padding: 0.5rem; font-size: 1.35rem; white-space: nowrap; overflow: hidden; cursor: default;">Brault
+                <li role="option" id="desktop-make-suggestion-2" aria-selected="false" class="auto-suggestions" style="margin: 0px; padding: 0.5rem; font-size: 1.35rem; white-space: nowrap; overflow: hidden; cursor: default;">Brault
                 </li>
-                <li role="option" id="Make-suggestion3" aria-selected="false" class="auto-suggestions" style="margin: 0px; padding: 0.5rem; font-size: 1.35rem; white-space: nowrap; overflow: hidden; cursor: default;">Braunschmidt
+                <li role="option" id="desktop-make-suggestion-3" aria-selected="false" class="auto-suggestions" style="margin: 0px; padding: 0.5rem; font-size: 1.35rem; white-space: nowrap; overflow: hidden; cursor: default;">Braunschmidt
                 </li>
             </ul>
         </div>

dist/AutoSuggest.js

@@ -1,6 +1,6 @@
 {
   "name": "react-autosuggestions",
-  "version": "3.2.1",
+  "version": "3.3.0",
   "keywords": [
     "React",
     "auto-suggest",

package-lock.json

@@ -5,16 +5,17 @@ import "../index.css";
 import { defaultOptions } from "../utils/defaultOptions.js";
 
 export const AutoSuggest = ({
-    type = "",
-    url = "",
-    name = "Search",
+    caseInsensitive = true,
     debounceTime = 200,
-    styles = defaultOptions,
-    options = [],
-    handleChange,
     disabled = false,
+    handleChange,
+    id,
+    name = "Search",
+    options = [],
+    styles = defaultOptions,
+    type = "",
+    url = "",
     value,
-    caseInsensitive = true
 }) => {
     const combinedStyles = {
         announcement: {
@@ -72,33 +73,35 @@ export const AutoSuggest = ({
     if (type === "server" || url) {
         return (
             <AutoSuggestServer
-                ref={ref}
-                name={name}
-                url={url}
-                type="Server"
-                debounceTime={debounceTime}
-                styles={combinedStyles}
-                isOpen={isOpen}
-                setIsOpen={setIsOpen}
-                handleChange={handleChange}
-                disabled={disabled}
-                value={value}
+            debounceTime={debounceTime}
+            disabled={disabled}
+            handleChange={handleChange}
+            id={id}
+            isOpen={isOpen}
+            name={name}
+            setIsOpen={setIsOpen}
+            styles={combinedStyles}
+            type="Server"
+            ref={ref}
+            url={url}
+            value={value}
             />
         );
     }
     return (
         <AutoSuggestClient
-            ref={ref}
+            caseInsensitive={caseInsensitive}
+            disabled={disabled}
+            handleChange={handleChange}
+            id={id}
+            isOpen={isOpen}
             name={name}
-            type="Client"
             options={options}
-            styles={combinedStyles}
-            isOpen={isOpen}
+            ref={ref}
             setIsOpen={setIsOpen}
-            handleChange={handleChange}
-            disabled={disabled}
+            type="Client"
+            styles={combinedStyles}
             value={value}
-            caseInsensitive={caseInsensitive}
         />
     );
 };

package.json

@@ -4,7 +4,7 @@ import { alphanumericSort } from "../utils/alphanumericSort.js";
 
 export const AutoSuggestClient = React.forwardRef(
     (
-        { name, options, styles, type, isOpen, setIsOpen, handleChange, disabled, value, caseInsensitive },
+        {  caseInsensitive, disabled, handleChange, id, isOpen, name, options, setIsOpen, styles, type, value, },
         ref
     ) => {
         const [sortedOptions, optionType] = alphanumericSort(options);
@@ -53,22 +53,23 @@ export const AutoSuggestClient = React.forwardRef(
 
         return (
             <AutoSuggestContainer
-                ref={ref}
+                activeDescendant={activeDescendant}
+                clearText={() => {
+                    handleChange();
+                }}
+                dataType={type}
+                disabled={disabled}
+                id={id}
                 name={name}
-                options={results}
+                noResult={noResult}
                 openListbox={isOpen}
+                options={results}
+                ref={ref}
                 searchText={value}
+                setActiveDescendant={setActiveDescendant}
                 setOpenListbox={setIsOpen}
                 setSearchText={handleInputChange}
                 styles={styles}
-                dataType={type}
-                noResult={noResult}
-                activeDescendant={activeDescendant}
-                setActiveDescendant={setActiveDescendant}
-                clearText={() => {
-                    handleChange();
-                }}
-                disabled={disabled}
             />
         );
     }

src/components/AutoSuggest.js

@@ -4,22 +4,23 @@ import { AutoSuggestOptions } from "./AutoSuggestOptions.js";
 export const AutoSuggestContainer = React.forwardRef(
     (
         {
+            activeDescendant,
+            clearText,
+            dataType,
+            disabled,
+            error = false,
+            id,
+            loading = false,
             name,
+            noResult = false,
+            openListbox,
             options,
-            error = false,
-            setSearchText,
             searchText = "",
-            openListbox,
-            setOpenListbox,
-            clearText,
-            noResult = false,
-            styles,
-            loading = false,
-            setLoading = () => {},
-            dataType,
-            activeDescendant,
             setActiveDescendant,
-            disabled
+            setLoading = () => {},
+            setOpenListbox,
+            setSearchText,
+            styles
         },
         inputRef
     ) => {
@@ -133,10 +134,12 @@ export const AutoSuggestContainer = React.forwardRef(
             let text = highlighted.getAttribute("textvalue");
             setSearchText(text);
         };
+
+        const idOrName = id || name;
         return (
             <>
                 <div
-                    id={`${name}-announcement`}
+                    id={`${idOrName}-announcement`}
                     className="visually-hidden"
                     aria-live="polite"
                     data-type={dataType}
@@ -148,19 +151,19 @@ export const AutoSuggestContainer = React.forwardRef(
                 </div>
                 <div>
                     <div
-                        id={`${name}-searchField`}
+                        id={`${idOrName}-searchField`}
                         role="combobox"
                         aria-expanded={openListbox ? "true" : "false"}
-                        aria-owns={`${name}-input`}
+                        aria-owns={`${idOrName}-input`}
                         aria-haspopup="listbox"
-                        aria-controls={`${name}-autosuggest-options`}
+                        aria-controls={`${idOrName}-autosuggest-options`}
                         style={styles.combobox && styles.combobox}
                     >
-                        <label id={`${name}-label`} style={styles.searchLabel && styles.searchLabel}>
+                        <label id={`${idOrName}-label`} style={styles.searchLabel && styles.searchLabel}>
                             {label}
                         </label>
                         <input
-                            id={`${name}-input`}
+                            id={`${idOrName}-input`}
                             type="text"
                             className={loading ? `loading searchfield` : "searchfield"}
                             autoComplete="off"
@@ -169,7 +172,7 @@ export const AutoSuggestContainer = React.forwardRef(
                             onChange={doSearch}
                             onKeyDown={doKeyPress}
                             value={searchText}
-                            aria-labelledby={`${name}-label`}
+                            aria-labelledby={`${idOrName}-label`}
                             style={styles.searchField && styles.searchField}
                             aria-activedescendant={activeDescendant}
                             disabled={disabled ? true : false}
@@ -178,25 +181,25 @@ export const AutoSuggestContainer = React.forwardRef(
                     {loading && <p style={styles.announcement && styles.announcement}>Loading {label} options</p>}
                     <div
                         className="autocompleteSuggestions"
-                        id={`${name}-autocomplete`}
+                        id={`${idOrName}-autocomplete`}
                         style={
                             styles.suggestionsContainer
                                 ? {
-                                      ...styles.suggestionsContainer,
-                                      display: openListbox ? "block" : "none"
-                                  }
+                                    ...styles.suggestionsContainer,
+                                    display: openListbox ? "block" : "none"
+                                }
                                 : { display: openListbox ? "block" : "none" }
                         }
                     >
                         {openListbox && options.length > 0 && (
                             <AutoSuggestOptions
-                                ref={suggestionRef}
-                                id={`${name}-autosuggest-options`}
-                                options={options}
-                                onClick={(e) => copyTextRemoveSuggestions(e)}
-                                styles={styles}
+                                id={idOrName}
                                 name={name}
+                                onClick={(e) => copyTextRemoveSuggestions(e)}
+                                options={options}
+                                ref={suggestionRef}
                                 selected={activeDescendant}
+                                styles={styles}
                             />
                         )}
                     </div>

src/components/AutoSuggestClient.js

@@ -1,25 +1,17 @@
 import React from "react";
 
-export const AutoSuggestOption = ({
-    id,
-    styles,
-    value,
-    selected,
-    onClick,
-    name = undefined,
-    abbr = undefined
-}) => {
+export const AutoSuggestOption = ({ abbr = undefined, id, name = undefined, onClick, selected, styles, value }) => {
     return (
         <li
-            role="option"
-            id={id}
+            abbr={abbr && abbr}
             aria-selected={id === selected}
-            className={id === selected ? `auto-suggestions highlighted` : 'auto-suggestions'}
+            className={id === selected ? `auto-suggestions highlighted` : "auto-suggestions"}
+            id={id}
+            name={name && name}
+            onClick={onClick}
+            role="option"
             style={styles.suggestionOption && styles.suggestionOption}
             textvalue={value}
-            onClick={onClick}
-            name={name && name}
-            abbr={abbr && abbr}
         >
             {value}
         </li>