From f00d4d050214fa32e56b27e9825a0f5184df4223 Mon Sep 17 00:00:00 2001
From: Owen Jones <owen.jones@digital.cabinet-office.gov.uk>
Date: Tue, 8 Oct 2024 12:28:55 +0100
Subject: [PATCH] Add styling for 'flowing' input into menu

Adds a `bottomless` class to the input that removes the bottom border and activates when a dialog is displayed and a top 'border' to visually separate input and dialog
---
 src/autocomplete.css | 29 +++++++++++++++++++++++++++--
 src/autocomplete.js  |  4 ++++
 2 files changed, 31 insertions(+), 2 deletions(-)

diff --git a/src/autocomplete.css b/src/autocomplete.css
index 9722332c..e1bb7fbd 100644
--- a/src/autocomplete.css
+++ b/src/autocomplete.css
@@ -35,6 +35,22 @@
   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-wrapper {
+  display: none;
+}
+
+.autocomplete__dropdown-arrow-down-wrapper--visible {
+  display: block;
+}
+
 .autocomplete__dropdown-arrow-down {
   z-index: -1;
   display: inline-block;
@@ -50,12 +66,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__menu:before {
+  content: "";
+  display: block;
+  background-color: #0b0c0c;
+  height: 1px;
+  width: calc(100% - 20px);
+  margin: 0 0 0 10px;
 }
 
 .autocomplete__menu--visible {
diff --git a/src/autocomplete.js b/src/autocomplete.js
index 44729fdb..3c1537ff 100644
--- a/src/autocomplete.js
+++ b/src/autocomplete.js
@@ -481,6 +481,10 @@ export default class Autocomplete extends Component {
       inputClassList.push(`${inputClassName}--focused`)
     }
 
+    if (menuOpen || showNoOptionsFound) {
+      inputClassList.push(`${inputClassName}--bottomless`)
+    }
+
     if (showAllValues) {
       inputClassList.push(`${inputClassName}--show-all-values`)
     }