Add visual cue for when a dialog is available

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.css

@@ -39,6 +39,14 @@
   cursor: pointer;
 }
 
+.autocomplete__input--bottomless {
+  border-bottom: 0;
+}
+
+.autocomplete__input--bottomless.autocomplete__input--focused {
+  box-shadow: inset 2px 2px 0 0, inset -2px 0 0 0;
+}
+
 .autocomplete__dropdown-arrow-down {
   z-index: -1;
   display: inline-block;
@@ -54,12 +62,21 @@
   border: 2px solid #0b0c0c;
   border-top: 0;
   color: #0b0c0c;
-  margin: 0;
+  margin: 0 0 0 2px;
   max-height: 342px;
   overflow-x: hidden;
   padding: 0;
   width: 100%;
-  width: calc(100% - 4px);
+  width: calc(100% - 8px);
+}
+
+.autocomplete__input--bottomless ~ .autocomplete__menu:before {
+  content: "";
+  display: block;
+  background-color: #0b0c0c;
+  height: 1px;
+  width: calc(100% - 20px);
+  margin: 0 0 0 10px;
 }
 
 .autocomplete__menu--visible {

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,6 +486,10 @@ export default class Autocomplete extends Component {
       inputClassList.push(`${inputClassName}--focused`)
     }
 
+    if (useBottomlessInput && (menuOpen || showNoOptionsFound)) {
+      inputClassList.push(`${inputClassName}--bottomless`)
+    }
+
     if (inputClasses) {
       inputClassList.push(inputClasses)
     }