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 = ({
>
- {hasSearch && }
-
- {children}
-
+
+ {hasSearch && }
+
+ {children}
+
+
>
)
}
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..f177e016a 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: $z-navigation;
+ }
&-search {
border-radius: $bdrs-molecule-select-search;
border: $bd-molecule-select-search;