From f1806dd2fb9676e16972055bf05b45fff534300d Mon Sep 17 00:00:00 2001
From: Carolina Mallo <carolina.mallo.ext@adevinta.com>
Date: Thu, 21 Nov 2024 16:28:07 +0100
Subject: [PATCH 1/2] feat(components/molecule/select): fx position of select
 with search

---
 .../select/src/components/SingleSelection.js  | 23 +++++++++++--------
 .../molecule/select/src/components/config.js  |  1 +
 .../molecule/select/src/styles/index.scss     |  5 ++++
 3 files changed, 19 insertions(+), 10 deletions(-)

diff --git a/components/molecule/select/src/components/SingleSelection.js b/components/molecule/select/src/components/SingleSelection.js
index 597fc6303..f26867ae1 100644
--- a/components/molecule/select/src/components/SingleSelection.js
+++ b/components/molecule/select/src/components/SingleSelection.js
@@ -4,6 +4,7 @@ import PropTypes from 'prop-types'
 
 import AtomInput, {inputTypes} from '@s-ui/react-atom-input'
 import MoleculeDropdownList from '@s-ui/react-molecule-dropdown-list'
+import {CLASS_SEARCH_CONTAINER} from './config.js'
 
 import {
   useDropdown,
@@ -73,16 +74,18 @@ const MoleculeSelectSingleSelection = ({
       >
         <AtomInput inputMode={inputTypes.NONE} />
       </MoleculeInputSelect>
-      {hasSearch && <Search />}
-      <MoleculeDropdownList
-        size={size}
-        visible={isOpen}
-        onSelect={handleSelection}
-        value={value}
-        onKeyDown={handleKeyDown}
-      >
-        {children}
-      </MoleculeDropdownList>
+      <div className={CLASS_SEARCH_CONTAINER}>
+        {hasSearch && <Search />}
+        <MoleculeDropdownList
+          size={size}
+          visible={isOpen}
+          onSelect={handleSelection}
+          value={value}
+          onKeyDown={handleKeyDown}
+        >
+          {children}
+        </MoleculeDropdownList>
+      </div>
     </>
   )
 }
diff --git a/components/molecule/select/src/components/config.js b/components/molecule/select/src/components/config.js
index 115d7f596..6f24d50e7 100644
--- a/components/molecule/select/src/components/config.js
+++ b/components/molecule/select/src/components/config.js
@@ -4,6 +4,7 @@ import {BASE_CLASS as ROOT_BASE_CLASS} from '../config.js'
 
 export const BASE_CLASS = `${ROOT_BASE_CLASS}-inputSelect`
 const CLASS_SEARCH = `${BASE_CLASS}-search`
+export const CLASS_SEARCH_CONTAINER = `${BASE_CLASS}-search-container`
 export const getClassSearch = isOpen =>
   cx(CLASS_SEARCH, {
     [`${CLASS_SEARCH}--hidden`]: !isOpen
diff --git a/components/molecule/select/src/styles/index.scss b/components/molecule/select/src/styles/index.scss
index 69d0043a1..6e19c0a88 100644
--- a/components/molecule/select/src/styles/index.scss
+++ b/components/molecule/select/src/styles/index.scss
@@ -14,6 +14,11 @@ $class-select-atom-input-tags: '#{$class-select-atom-input}--withTags';
   }
 
   &-inputSelect {
+    &-search-container {
+      position: absolute;
+      width: 100%;
+      z-index: 800;
+    }
     &-search {
       border-radius: $bdrs-molecule-select-search;
       border: $bd-molecule-select-search;

From f60d3eb00d6da79d7d1c00afddad593100f25db6 Mon Sep 17 00:00:00 2001
From: Carolina Mallo <carolina.mallo.ext@adevinta.com>
Date: Thu, 21 Nov 2024 17:26:31 +0100
Subject: [PATCH 2/2] feat(components/molecule/select): correct z-index

---
 components/molecule/select/src/styles/index.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/molecule/select/src/styles/index.scss b/components/molecule/select/src/styles/index.scss
index 6e19c0a88..f177e016a 100644
--- a/components/molecule/select/src/styles/index.scss
+++ b/components/molecule/select/src/styles/index.scss
@@ -17,7 +17,7 @@ $class-select-atom-input-tags: '#{$class-select-atom-input}--withTags';
     &-search-container {
       position: absolute;
       width: 100%;
-      z-index: 800;
+      z-index: $z-navigation;
     }
     &-search {
       border-radius: $bdrs-molecule-select-search;