Merge pull request #2782 from SUI-Components/feat/fx-select-with-sear…

…ch-position feat(components/molecule/select): fx position of select with search
SUI-Components · Nov 22, 2024 · df68bfa · df68bfa
2 parents 9a3ad7f + f60d3eb
commit df68bfa
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 10 deletions.
diff --git 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
@@ -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
@@ -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;