From 907a77d141af117790b47e1430205e1a73423273 Mon Sep 17 00:00:00 2001
From: Jonas <jonas.kumlin@karlstad.se>
Date: Fri, 3 Nov 2023 10:10:47 +0100
Subject: [PATCH] fix: set maxheight for layer search (#1886)

* Set maxheight for layer search

* Update _awesomplete.theme.scss

* Update _awesomplete.theme.scss

* Update _awesomplete.base.scss

* Fix for search as well

* Update search.js

* Final adjustments
---
 scss/externs/_awesomplete.base.scss  | 6 ++++--
 scss/externs/_awesomplete.theme.scss | 7 -------
 src/controls/legend.js               | 2 +-
 src/controls/search.js               | 3 +++
 4 files changed, 8 insertions(+), 10 deletions(-)

diff --git a/scss/externs/_awesomplete.base.scss b/scss/externs/_awesomplete.base.scss
index c0e700bfe..72a7712ba 100644
--- a/scss/externs/_awesomplete.base.scss
+++ b/scss/externs/_awesomplete.base.scss
@@ -30,6 +30,7 @@
   position: absolute;
   top: 40px;
   z-index: 1;
+  overflow-y: auto;
 }
 
 .awesomplete.black > ul {
@@ -39,14 +40,15 @@
   left: 0px;
   list-style: none;
   margin: 0;
-  min-width: 180px;
-  max-width: 100%;
+  width: 100%;
+  min-width: unset;
   overflow-wrap: break-word;
   padding: 0;
   position: absolute;
   top: auto;
   bottom: 100%;
   z-index: 9999999;
+  overflow-y: auto;
 }
 
 .awesomplete > ul:empty {
diff --git a/scss/externs/_awesomplete.theme.scss b/scss/externs/_awesomplete.theme.scss
index 288d2d8c6..5903a37d6 100644
--- a/scss/externs/_awesomplete.theme.scss
+++ b/scss/externs/_awesomplete.theme.scss
@@ -84,10 +84,3 @@
 .awesomplete li[aria-selected='true'] mark {
   background-color: $search-hover-backround;
 }
-
-&[class*=#{$media-l-m}] {
-  .awesomplete > ul {
-    max-width: calc(100% + 2rem);
-    min-width: calc(100% + 2rem);
-  }
-}
diff --git a/src/controls/legend.js b/src/controls/legend.js
index f47d9c3f3..1abcf8dbf 100644
--- a/src/controls/legend.js
+++ b/src/controls/legend.js
@@ -507,7 +507,7 @@ const Legend = function Legend(options = {}) {
           return suggestionValue.toLowerCase().includes(userInput.toLowerCase()) ? suggestionValue : false;
         }
       });
-
+      awesomplete.ul.style.maxHeight = `${calcMaxHeight(getTargetHeight()) / 2}px`;
       input.parentNode.classList.add('black');
       input.parentNode.classList.add('grow');
       input.addEventListener('keyup', (e) => {
diff --git a/src/controls/search.js b/src/controls/search.js
index 166508a1f..8724e8140 100644
--- a/src/controls/search.js
+++ b/src/controls/search.js
@@ -312,6 +312,8 @@ const Search = function Search(options = {}) {
 
   function initAutocomplete() {
     const input = document.getElementsByClassName('o-search-field')[0];
+    const mapEl = viewer.getMap().getTargetElement();
+    const listHeight = mapEl.offsetHeight / 2;
 
     awesomplete = new Awesomplete('.o-search-field', {
       minChars: minLength,
@@ -324,6 +326,7 @@ const Search = function Search(options = {}) {
         return suggestionValue.toLowerCase().includes(userInput.toLowerCase()) ? suggestionValue : false;
       }
     });
+    awesomplete.ul.style.maxHeight = `${listHeight}px`;
 
     const handler = function func(list) {
       awesomplete.list = list;