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;