othmane/ohif-viewer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(select): utilize react portals for select component (#4144)

Browse Source
This commit is contained in:
Ibrahim 2024-05-17 13:08:03 -04:00 committed by Alireza
parent 60d68e3410
commit 8feef28bff
2 changed files with 20 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
platform/ui/src/components/Select/Select.css
View File

@ -27,16 +27,16 @@
padding: 4px; padding: 4px;
} }
.customSelect__wrapper .customSelect__option { .customSelect__option {
color: #d6d6d6; color: #d6d6d6 !important;
font-size: 14px; font-size: 14px !important;
display: flex; display: flex !important;
align-items: center; align-items: center !important;
@apply flex flex-row items-center; @apply flex flex-row items-center !important;
} }
.customSelect__wrapper .customSelect__option--is-selected { .customSelect__option--is-selected {
@apply bg-transparent; @apply bg-transparent !important;
} }
.customSelect__wrapper .customSelect__single-value { .customSelect__wrapper .customSelect__single-value {
@ -55,26 +55,26 @@
@apply inline-block truncate px-3 py-2; @apply inline-block truncate px-3 py-2;
} }
.ohif-select .customSelect__menu { .customSelect__menu-portal .customSelect__menu {
background-color: transparent !important; background-color: transparent !important;
border-radius: 6px; border-radius: 6px;
} }
.ohif-select .customSelect__menu-list { .customSelect__menu-portal .customSelect__menu-list {
overflow-x: hidden !important; overflow-x: hidden !important;
margin: 4px; margin: 4px;
padding-top: 0px !important; padding-top: 0px !important;
} }
.ohif-select .customSelect__menu-list::-webkit-scrollbar { .customSelect__menu-portal .customSelect__menu-list::-webkit-scrollbar {
width: 6px; width: 6px;
border-radius: 10px; border-radius: 10px;
} }
.ohif-select .customSelect__placeholder { .customSelect__menu-portal .customSelect__placeholder {
@apply text-aqua-pale pl-1.5; @apply text-aqua-pale pl-1.5;
} }
.ohif-select .customSelect__menu-list::-webkit-scrollbar-thumb { .customSelect__menu-portal .customSelect__menu-list::-webkit-scrollbar-thumb {
background-color: #0944b3; background-color: #0944b3;
border-radius: 10px; border-radius: 10px;
} }
@ -83,11 +83,11 @@
background-color: #0944b391 !important; background-color: #0944b391 !important;
} }
.ohif-select .customSelect__option:hover { .customSelect__menu-portal .customSelect__option:hover {
background-color: #0944b391; background-color: #0944b391;
} }
.ohif-select .customSelect__menu { .customSelect__menu-portal .customSelect__menu {
border: 2px solid #0944b3; border: 2px solid #0944b3;
border-radius: 6px; border-radius: 6px;
background-color: #151515 !important; background-color: #151515 !important;

5
platform/ui/src/components/Select/Select.tsx
View File

@ -94,6 +94,11 @@ const Select = ({
components={_components} components={_components}
placeholder={placeholder} placeholder={placeholder}
options={options} options={options}
blurInputOnSelect={true}
menuPortalTarget={document.body}
styles={{
menuPortal: base => ({ ...base, zIndex: 9999 }),
}}
value={value && Array.isArray(value) ? selectedOptions : value} value={value && Array.isArray(value) ? selectedOptions : value}
onChange={(selectedOptions, { action }) => { onChange={(selectedOptions, { action }) => {
const newSelection = !selectedOptions.length const newSelection = !selectedOptions.length