Add useBottomlessInput attribute

This gates the feature behind a component attribute so that users of the `cssNamespace` attribute don't get served extra useless classes on component render.

README.md

@@ -335,6 +335,20 @@ Type: `Function`
 
 A function that gets passed an object with the property `className` (`{ className: '' }`) and should return a string of HTML or a (P)React element. :warning: **Caution:** because this function allows you to output arbitrary HTML, you should [make sure it's trusted](https://en.wikipedia.org/wiki/Cross-site_scripting), and accessible.
 
+#### `useBottomlessInput` (default: `false`)
+
+Type: `Boolean`
+
+If this is set to `true`, the input will it's bottom border and 'flow' into the dialog box below when suggestions or the 'no results' dialog are visible. This is a 'feature flag' for a visual enhancement to help users using zoom notice that there is more information available below the input when they're zoomed in very close to the input.
+
+If using this and the `cssNamespace` option, you will need to create CSS rules for:
+
+- `[namespace]__input--bottomless`
+- `[namespace]__input--bottomless.[namespace]__input--focused`
+- `[namespace]__menu:before`
+
+If not, this enhancement will not be applied. See `autocomplete.css` for how we've applied these styles.
+
 ### Internationalization
 
 #### `tNoResults` (default: `() => 'No results found'`)

examples/index.html

@@ -136,6 +136,15 @@ <h3><code>{ showAllValues: true, dropdownArrow: () => '' }</code></h3>
       <label for="autocomplete-customDropdownArrow">Country</label>
       <div id="tt-customDropdownArrow" class="autocomplete-wrapper"></div>
 
+      <h3><code>{ useBottomlessInput: true }</code></h3>
+      <p>
+        This option will toggle the input losing it's bottom border and 'flowing'
+        into the dialog box below when suggestions or the 'no results' dialog
+        are visible.
+      </p>
+      <label for="autocomplete-useBottomlessInput">Country</label>
+      <div id="tt-useBottomlessInput" class="autocomplete-wrapper"></div>
+
       <h3><code>{ inputClasses: 'app-input'}</code></h3>
       <p>
         The classes provided in <code>inputClasses</code> are added to
@@ -689,5 +698,15 @@ <h3>Translating texts</h3>
       })
     </script>
 
+    <script type="text/javascript">
+      element = document.querySelector('#tt-useBottomlessInput')
+      id = 'autocomplete-useBottomlessInput'
+      accessibleAutocomplete({
+        element: element,
+        id: id,
+        source: countries,
+        useBottomlessInput: true
+      })
+    </script>
   </body>
 </html>

src/autocomplete.js

@@ -51,6 +51,7 @@ export default class Autocomplete extends Component {
     tNoResults: () => 'No results found',
     tAssistiveHint: () => 'When autocomplete results are available use up and down arrows to review and enter to select.  Touch device users, explore by touch or with swipe gestures.',
     dropdownArrow: DropdownArrowDown,
+    useBottomlessInput: false,
     menuAttributes: {},
     inputClasses: null,
     hintClasses: null,
@@ -422,6 +423,7 @@ export default class Autocomplete extends Component {
       tStatusResults,
       tAssistiveHint,
       dropdownArrow: dropdownArrowFactory,
+      useBottomlessInput,
       menuAttributes,
       inputClasses,
       hintClasses,
@@ -484,7 +486,7 @@ export default class Autocomplete extends Component {
       inputClassList.push(`${inputClassName}--focused`)
     }
 
-    if (menuOpen || showNoOptionsFound) {
+    if (useBottomlessInput && (menuOpen || showNoOptionsFound)) {
       inputClassList.push(`${inputClassName}--bottomless`)
     }