From 6d5825636477b62c0a5de729c3c45ca5d2eb1be3 Mon Sep 17 00:00:00 2001
From: Jon Mulhern <81927768+curlyfriesplease@users.noreply.github.com>
Date: Mon, 25 Nov 2024 22:25:59 +0000
Subject: [PATCH] Closes a dropdown list when the placeholder line is clicked

---
 .../TextInputWithDropdown.js                  | 25 +++++++++++++++----
 1 file changed, 20 insertions(+), 5 deletions(-)

diff --git a/src/components/Atoms/TextInputWithDropdown/TextInputWithDropdown.js b/src/components/Atoms/TextInputWithDropdown/TextInputWithDropdown.js
index 494bc8b26..4fa457454 100644
--- a/src/components/Atoms/TextInputWithDropdown/TextInputWithDropdown.js
+++ b/src/components/Atoms/TextInputWithDropdown/TextInputWithDropdown.js
@@ -7,7 +7,6 @@ import {
   Container,
   Dropdown,
   DropdownList,
-  DropdownItem,
   DropdownItemSelectable,
   TextItalic
 } from './TextInputWithDropdown.style';
@@ -66,6 +65,12 @@ const TextInputWithDropdown = React.forwardRef(
       };
     }, [options.length, forceClosed, onChange]);
 
+    const closeDropdown = () => {
+      console.log('handleDropdownInstructionClick');
+      setForceClosed(true);
+      setActiveOption(-1);
+    };
+
     // Reset forceClosed when options change
     useEffect(() => {
       setForceClosed(false);
@@ -112,6 +117,7 @@ const TextInputWithDropdown = React.forwardRef(
       onSelect,
       dropdownInstruction,
       activeOption,
+      closeDropdown,
       resetActiveOption: () => setActiveOption(-1)
     };
 
@@ -144,6 +150,7 @@ const Options = React.forwardRef(({
   dropdownInstruction,
   onSelect,
   activeOption,
+  closeDropdown,
   resetActiveOption,
   ...rest
 }, ref) => {
@@ -170,9 +177,16 @@ const Options = React.forwardRef(({
         }
       >
         {dropdownInstruction && (
-          <DropdownItem role="option">
-            <TextItalic>{dropdownInstruction}</TextItalic>
-          </DropdownItem>
+          <DropdownItemSelectable
+            id="dropdown-instruction"
+            role="option"
+            key="dropdown-instruction"
+            onClick={closeDropdown}
+          >
+            <TextItalic>
+              {dropdownInstruction}
+            </TextItalic>
+          </DropdownItemSelectable>
         )}
         {options.map((option, index) => (
           <DropdownItemSelectable
@@ -220,7 +234,8 @@ Options.propTypes = {
   dropdownInstruction: PropTypes.string,
   activeOption: PropTypes.number.isRequired,
   resetActiveOption: PropTypes.func.isRequired,
-  hideBorder: PropTypes.bool
+  hideBorder: PropTypes.bool,
+  closeDropdown: PropTypes.func.isRequired
 };
 
 TextInputWithDropdown.displayName = 'TextInputWithDropdown';