From 932bedc9cae87d69e09ba024a46f2c8959b0637f Mon Sep 17 00:00:00 2001
From: nehalaggarwal-bcgov <nehal.aggarwal@gov.bc.ca>
Date: Mon, 16 Dec 2024 09:33:08 -0800
Subject: [PATCH] TNO-3017 auto complete search field (#2363)

* TNO-3017 changes to UI to add select drop down with reports

* TNO-3017 adding dorpdown to select the report to add stories to.

* TNO-3017 fixed linting errors

* TNO-3017 changes to input field for sections search

* Changes to add search icon to sections

* TNO-3017 Add Serach field for Sections

* MMI-3017 changes to add scroll bar and clear search after section selected.

* MMI-3017 changes to css class to remove orizontal scroll on saving
---
 .../src/components/tool-bar/AddToReportMenu.tsx    |  2 ++
 .../src/components/tool-bar/styled/AddToMenu.tsx   | 14 ++++++++++----
 2 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/app/subscriber/src/components/tool-bar/AddToReportMenu.tsx b/app/subscriber/src/components/tool-bar/AddToReportMenu.tsx
index 94a19a9438..1f8d164878 100644
--- a/app/subscriber/src/components/tool-bar/AddToReportMenu.tsx
+++ b/app/subscriber/src/components/tool-bar/AddToReportMenu.tsx
@@ -98,10 +98,12 @@ export const AddToReportMenu: React.FC<IAddToReportMenuProps> = ({ content, onCl
           </div>
         ));
         onClear?.();
+        setSearchQuery('');
       } catch {
         // Errors are handled globally.
       } finally {
         setInProgress({ sectionName: '', value: false });
+        setSearchQuery('');
       }
     },
     [addContentToReport, onClear, getReport, generateReport],
diff --git a/app/subscriber/src/components/tool-bar/styled/AddToMenu.tsx b/app/subscriber/src/components/tool-bar/styled/AddToMenu.tsx
index 7a746562a0..c92bf7d5a7 100644
--- a/app/subscriber/src/components/tool-bar/styled/AddToMenu.tsx
+++ b/app/subscriber/src/components/tool-bar/styled/AddToMenu.tsx
@@ -24,6 +24,7 @@ export const AddToMenu = styled.div`
   }
   .report-name {
     margin-left: 1.5em;
+    flex: auto;
   }
   .react-tooltip {
     font-size: 1.1em;
@@ -39,10 +40,11 @@ export const AddToMenu = styled.div`
       color: ${(props) => props.theme.css.btnBkPrimary};
       font-weight: bold;
       border-bottom: 1px solid ${(props) => props.theme.css.btnBkPrimary};
-    }
-    .active-section {
-      position: absolute;
-      left: 2.85em;
+      .active-section {
+        position: sticky;
+        border-bottom: none;
+        margin-left: -1.8em;
+      }
     }
     margin-left: 3.5em;
     &:not(:hover) {
@@ -85,4 +87,8 @@ export const AddToMenu = styled.div`
       color: ${(props) => props.theme.css.iconPrimaryColor};
     }
   }
+  .section-list {
+    max-height: 50vh;
+    overflow-y: auto;
+    overflow-x: hidden;
 `;