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

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

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