From f17f1a12f01b991fd54234fd866b6e078e03eb19 Mon Sep 17 00:00:00 2001
From: Emiel Van Severen <github@vanseveren.dev>
Date: Fri, 1 Nov 2024 22:56:37 +0100
Subject: [PATCH] bugfix: always render select in portal

---
 .../data/Table/subcomponents/Filter/field.tsx |  2 --
 .../Pagination/PageSizeSelect.tsx             |  1 -
 .../DateRangePicker/QuickSelect/index.tsx     |  2 --
 .../subcomponents/RelativePicker/index.tsx    |  2 --
 .../inputs/DurationField/Generic.tsx          |  1 -
 .../inputs/selects/SelectField/Controlled.tsx |  2 --
 .../selects/SelectField/Generic/index.tsx     | 20 ++++-------
 .../selects/SelectQueryField/Controlled.tsx   |  2 --
 .../SelectQueryField/Generic/index.tsx        | 34 ++++++++++---------
 .../JsonSchemaForm/widgets/ItemWidget.tsx     |  1 -
 .../JsonSchemaForm/widgets/SelectWidget.tsx   |  1 -
 .../selects/CountrySelectField/index.tsx      |  2 --
 .../selects/EventNameSelectField/index.tsx    |  2 --
 .../GameServerSelectQueryField/index.tsx      |  4 ---
 .../selects/ItemSelectQueryField/index.tsx    |  4 ---
 .../selects/ModuleSelectQueryField.tsx        |  4 ---
 .../selects/PlayerSelectQueryField.tsx        |  4 ---
 .../selects/RoleSelectQueryField.tsx          |  4 ---
 .../selects/TimePeriodSelectField.tsx         |  2 --
 .../_global/user.$userId.role.assign.tsx      |  2 +-
 .../-ShopListingCreateUpdateForm.tsx          |  1 -
 .../shop.listing.import.gameserver.tsx        |  1 -
 22 files changed, 25 insertions(+), 73 deletions(-)

diff --git a/packages/lib-components/src/components/data/Table/subcomponents/Filter/field.tsx b/packages/lib-components/src/components/data/Table/subcomponents/Filter/field.tsx
index 3f80390d1d..824a910900 100644
--- a/packages/lib-components/src/components/data/Table/subcomponents/Filter/field.tsx
+++ b/packages/lib-components/src/components/data/Table/subcomponents/Filter/field.tsx
@@ -70,7 +70,6 @@ export function FilterRow<DataType extends object>({
         control={control}
         name={`filters.${index}.column`}
         label="Column"
-        inPortal
         render={(selectedItems) => {
           if (selectedItems.length === 0) {
             return 'Select a column';
@@ -95,7 +94,6 @@ export function FilterRow<DataType extends object>({
         control={control}
         name={`filters.${index}.operator`}
         label="Condition"
-        inPortal
         render={() => {
           const operator = currentOperator?.toString();
 
diff --git a/packages/lib-components/src/components/data/Table/subcomponents/Pagination/PageSizeSelect.tsx b/packages/lib-components/src/components/data/Table/subcomponents/Pagination/PageSizeSelect.tsx
index d9d0f13189..520f966cb4 100644
--- a/packages/lib-components/src/components/data/Table/subcomponents/Pagination/PageSizeSelect.tsx
+++ b/packages/lib-components/src/components/data/Table/subcomponents/Pagination/PageSizeSelect.tsx
@@ -14,7 +14,6 @@ export const PageSizeSelect: FC<PageSizeSelectProps> = ({ onPageSizeChange, page
       id="page-size"
       multiple={false}
       name="pageSize"
-      inPortal={true}
       value={pageSize.toString() || '10'}
       onChange={onPageSizeChange}
       render={(selectedItems) => {
diff --git a/packages/lib-components/src/components/inputs/Date/DateRangePicker/QuickSelect/index.tsx b/packages/lib-components/src/components/inputs/Date/DateRangePicker/QuickSelect/index.tsx
index 8322e12f85..3358141cb4 100644
--- a/packages/lib-components/src/components/inputs/Date/DateRangePicker/QuickSelect/index.tsx
+++ b/packages/lib-components/src/components/inputs/Date/DateRangePicker/QuickSelect/index.tsx
@@ -99,7 +99,6 @@ export const QuickSelect: FC<QuickSelectProps> = ({ id }) => {
       <StyledForm onSubmit={handleSubmit(onSubmit)}>
         <InputsContainer>
           <SelectField
-            inPortal
             control={control}
             name="tense"
             render={(selectedItems) => (
@@ -120,7 +119,6 @@ export const QuickSelect: FC<QuickSelectProps> = ({ id }) => {
           <TextField control={control} type="number" name="step" />
 
           <SelectField
-            inPortal
             control={control}
             name="unit"
             render={(selectedItems) => (
diff --git a/packages/lib-components/src/components/inputs/Date/subcomponents/RelativePicker/index.tsx b/packages/lib-components/src/components/inputs/Date/subcomponents/RelativePicker/index.tsx
index 5ca5533757..571077bded 100644
--- a/packages/lib-components/src/components/inputs/Date/subcomponents/RelativePicker/index.tsx
+++ b/packages/lib-components/src/components/inputs/Date/subcomponents/RelativePicker/index.tsx
@@ -99,7 +99,6 @@ export const RelativePicker: FC<RelativePickerProps> = ({ onChange, id, timeDire
         <StyledForm onSubmit={handleSubmit(handleChange)}>
           <InputsContainer>
             <SelectField
-              inPortal
               control={control}
               readOnly={timeDirection !== 'pastAndFuture'}
               name="tense"
@@ -121,7 +120,6 @@ export const RelativePicker: FC<RelativePickerProps> = ({ onChange, id, timeDire
             </SelectField>
             <TextField control={control} type="number" name="step" />
             <SelectField
-              inPortal
               control={control}
               name="unit"
               render={(selectedItems) => (
diff --git a/packages/lib-components/src/components/inputs/DurationField/Generic.tsx b/packages/lib-components/src/components/inputs/DurationField/Generic.tsx
index 0dfd3098d8..251d7a5d1c 100644
--- a/packages/lib-components/src/components/inputs/DurationField/Generic.tsx
+++ b/packages/lib-components/src/components/inputs/DurationField/Generic.tsx
@@ -136,7 +136,6 @@ export const GenericDurationField = forwardRef<HTMLDivElement, GenericDurationFi
                 />
                 <SelectField
                   key={`${name}-${index}-unit`}
-                  inPortal
                   control={control}
                   name={`durations.${index}.unit`}
                   multiple={false}
diff --git a/packages/lib-components/src/components/inputs/selects/SelectField/Controlled.tsx b/packages/lib-components/src/components/inputs/selects/SelectField/Controlled.tsx
index b7d41e0cc7..d626d2a09f 100644
--- a/packages/lib-components/src/components/inputs/selects/SelectField/Controlled.tsx
+++ b/packages/lib-components/src/components/inputs/selects/SelectField/Controlled.tsx
@@ -30,7 +30,6 @@ export const ControlledSelectField: FC<ControlledSelectFieldProps> & SubComponen
     control,
     loading,
     enableFilter,
-    inPortal,
     canClear,
   } = defaultsApplier(props);
 
@@ -114,7 +113,6 @@ export const ControlledSelectField: FC<ControlledSelectFieldProps> & SubComponen
           onFocus={handleOnFocus}
           render={render}
           value={field.value}
-          inPortal={inPortal}
         >
           {children}
         </GenericSelectField>
diff --git a/packages/lib-components/src/components/inputs/selects/SelectField/Generic/index.tsx b/packages/lib-components/src/components/inputs/selects/SelectField/Generic/index.tsx
index 4c027799d9..0afd169c75 100644
--- a/packages/lib-components/src/components/inputs/selects/SelectField/Generic/index.tsx
+++ b/packages/lib-components/src/components/inputs/selects/SelectField/Generic/index.tsx
@@ -12,7 +12,7 @@ import {
   MouseEvent,
 } from 'react';
 import { GroupContainer, GroupLabel } from '../style';
-import { SelectContainer, StyledFloatingOverlay, StyledArrowIcon, SelectButton } from '../../sharedStyle';
+import { SelectContainer, StyledArrowIcon, SelectButton } from '../../sharedStyle';
 import { FilterInput } from './FilterInput';
 import { AiOutlineClose as ClearIcon } from 'react-icons/ai';
 
@@ -40,9 +40,6 @@ import { IconButton } from '../../../../../components/';
 interface SharedSelectFieldProps {
   render: (selectedItems: SelectItem[]) => React.ReactNode;
   enableFilter?: boolean;
-  /// Rendering in portal will render the selectDropdown independent from its parent container.
-  /// this is useful when select is rendered in other floating elements with limited space.
-  inPortal?: boolean;
 
   /// When true, The select icon will be replaced by a cross icon to clear the selected value.
   canClear?: boolean;
@@ -85,7 +82,6 @@ export const GenericSelectField: FC<GenericSelectFieldProps> & SubComponentTypes
     hasError,
     hasDescription,
     name,
-    inPortal = false,
     disabled,
     enableFilter = false,
     multiple = false,
@@ -116,14 +112,17 @@ export const GenericSelectField: FC<GenericSelectFieldProps> & SubComponentTypes
       size({
         apply({ availableHeight, elements, availableWidth }) {
           const refWidth = elements.reference.getBoundingClientRect().width;
+          const floatingContentWidth = elements.floating.scrollWidth;
 
           Object.assign(elements.floating.style, {
             // Note: we cannot use the rects.reference.width here because if the referenced item is very small compared to the other options, there will be horizontal overflow.
             // fit-content isn't the perfect solution either, because if there is no space available it might render outside the viewport.
-            width: availableWidth < refWidth ? `${availableWidth}px` : `${refWidth}px`,
+            minWidth:
+              availableWidth > refWidth ? `${availableWidth}px` : `${Math.max(refWidth, floatingContentWidth)}px`,
             maxHeight: `${Math.max(150, availableHeight)}px`,
           });
         },
+        padding: 10,
       }),
       flip({
         fallbackStrategy: 'bestFit',
@@ -286,14 +285,7 @@ export const GenericSelectField: FC<GenericSelectFieldProps> & SubComponentTypes
           <StyledArrowIcon size={16} />
         )}
       </SelectButton>
-      {open &&
-        (!inPortal ? (
-          <StyledFloatingOverlay lockScroll style={{ zIndex: 1000 }}>
-            {renderSelect()}
-          </StyledFloatingOverlay>
-        ) : (
-          <FloatingPortal>{renderSelect()}</FloatingPortal>
-        ))}
+      {open && <FloatingPortal>{renderSelect()}</FloatingPortal>}
     </SelectContext.Provider>
   );
 };
diff --git a/packages/lib-components/src/components/inputs/selects/SelectQueryField/Controlled.tsx b/packages/lib-components/src/components/inputs/selects/SelectQueryField/Controlled.tsx
index 0aed75ecc0..6909a37160 100644
--- a/packages/lib-components/src/components/inputs/selects/SelectQueryField/Controlled.tsx
+++ b/packages/lib-components/src/components/inputs/selects/SelectQueryField/Controlled.tsx
@@ -26,7 +26,6 @@ export const ControlledSelectQueryField: FC<ControlledSelectQueryFieldProps> & S
     name,
     multiple,
     control,
-    inPortal,
     debounce,
     isLoadingData,
     hasNextPage,
@@ -83,7 +82,6 @@ export const ControlledSelectQueryField: FC<ControlledSelectQueryFieldProps> & S
           multiple={multiple}
           required={required}
           size={componentSize}
-          inPortal={inPortal}
           onChange={field.onChange}
           onBlur={handleOnBlur}
           canClear={canClear}
diff --git a/packages/lib-components/src/components/inputs/selects/SelectQueryField/Generic/index.tsx b/packages/lib-components/src/components/inputs/selects/SelectQueryField/Generic/index.tsx
index c989a50811..e578e60307 100644
--- a/packages/lib-components/src/components/inputs/selects/SelectQueryField/Generic/index.tsx
+++ b/packages/lib-components/src/components/inputs/selects/SelectQueryField/Generic/index.tsx
@@ -16,6 +16,7 @@ import {
   FloatingPortal,
   size,
   useDismiss,
+  flip,
   useFloating,
   useInteractions,
   useRole,
@@ -32,7 +33,7 @@ import { PaginationProps } from '../../../';
 
 /* The SearchField depends on a few things of <Select/> */
 import { GroupLabel } from '../../SelectField/style';
-import { SelectContainer, SelectButton, StyledArrowIcon, StyledFloatingOverlay } from '../../sharedStyle';
+import { SelectContainer, SelectButton, StyledArrowIcon } from '../../sharedStyle';
 import { IconButton, InfiniteScroll, Spinner } from '../../../../../components';
 import { GenericTextField } from '../../../TextField/Generic';
 
@@ -46,8 +47,6 @@ interface SharedSelectQueryFieldProps extends PaginationProps {
   /// Triggered whenever the input value changes.
   /// This is used to trigger the API call to get the new options
   handleInputValueChange?: (value: string) => void;
-  /// render inPortal
-  inPortal?: boolean;
 
   /// When true, The select icon will be replaced by a cross icon to clear the selected value.
   canClear?: boolean;
@@ -100,7 +99,6 @@ export const GenericSelectQueryField = forwardRef<HTMLInputElement, GenericSelec
       id,
       placeholder = 'Search field',
       hasDescription,
-      inPortal = false,
       hasError,
       children,
       readOnly,
@@ -139,13 +137,24 @@ export const GenericSelectQueryField = forwardRef<HTMLInputElement, GenericSelec
       middleware: [
         offset(5),
         size({
-          apply({ rects, elements }) {
+          apply({ availableHeight, elements, availableWidth }) {
+            const refWidth = elements.reference.getBoundingClientRect().width;
+            const floatingContentWidth = elements.floating.scrollWidth;
+
+            const width =
+              availableWidth > refWidth ? `${availableWidth}px` : `${Math.max(refWidth, floatingContentWidth)}px`;
+
             Object.assign(elements.floating.style, {
-              width: `${rects.reference.width}px`,
-              maxHeight: '255px',
+              // Note: we cannot use the rects.reference.width here because if the referenced item is very small compared to the other options, there will be horizontal overflow.
+              // fit-content isn't the perfect solution either, because if there is no space available it might render outside the viewport.
+              width,
+              maxHeight: `${Math.max(150, availableHeight)}px`,
             });
           },
-          padding: 10,
+        }),
+        flip({
+          fallbackStrategy: 'bestFit',
+          fallbackPlacements: ['top', 'bottom'],
         }),
       ],
     });
@@ -312,14 +321,7 @@ export const GenericSelectQueryField = forwardRef<HTMLInputElement, GenericSelec
             <StyledArrowIcon size={16} />
           )}
         </SelectButton>
-        {open &&
-          (!inPortal ? (
-            <StyledFloatingOverlay lockScroll style={{ zIndex: 1000 }}>
-              {renderSelect()}
-            </StyledFloatingOverlay>
-          ) : (
-            <FloatingPortal>{renderSelect()}</FloatingPortal>
-          ))}
+        {open && <FloatingPortal>{renderSelect()}</FloatingPortal>}
       </SelectContext.Provider>
     );
   },
diff --git a/packages/web-main/src/components/JsonSchemaForm/widgets/ItemWidget.tsx b/packages/web-main/src/components/JsonSchemaForm/widgets/ItemWidget.tsx
index 5f264fbf81..2018446c9b 100644
--- a/packages/web-main/src/components/JsonSchemaForm/widgets/ItemWidget.tsx
+++ b/packages/web-main/src/components/JsonSchemaForm/widgets/ItemWidget.tsx
@@ -154,7 +154,6 @@ export function ItemWidget<T = unknown, S extends StrictRJSFSchema = RJSFSchema,
       hasNextPage={hasNextPage}
       isFetchingNextPage={isFetchingNextPage}
       optionCount={data?.pages[0].meta.total}
-      inPortal={true}
       fetchNextPage={fetchNextPage}
       render={(selectedItems) => {
         return (
diff --git a/packages/web-main/src/components/JsonSchemaForm/widgets/SelectWidget.tsx b/packages/web-main/src/components/JsonSchemaForm/widgets/SelectWidget.tsx
index 8db73bb448..1a0197a37e 100644
--- a/packages/web-main/src/components/JsonSchemaForm/widgets/SelectWidget.tsx
+++ b/packages/web-main/src/components/JsonSchemaForm/widgets/SelectWidget.tsx
@@ -30,7 +30,6 @@ export function SelectWidget<T = unknown, S extends StrictRJSFSchema = RJSFSchem
       readOnly={readonly}
       value={value || defaultValue}
       multiple={multiple}
-      inPortal={true}
       hasDescription={!!schema.description}
       onChange={onChange}
       render={(selectedItems) => {
diff --git a/packages/web-main/src/components/selects/CountrySelectField/index.tsx b/packages/web-main/src/components/selects/CountrySelectField/index.tsx
index b25afc3848..53480a07eb 100644
--- a/packages/web-main/src/components/selects/CountrySelectField/index.tsx
+++ b/packages/web-main/src/components/selects/CountrySelectField/index.tsx
@@ -23,7 +23,6 @@ export const CountrySelectField: FC<CountrySelectProps> = ({
   size,
   loading,
   disabled,
-  inPortal,
   readOnly,
   canClear = true,
   multiple,
@@ -45,7 +44,6 @@ export const CountrySelectField: FC<CountrySelectProps> = ({
       required={required}
       description={description}
       size={size}
-      inPortal={inPortal}
       render={(selectedItems) => {
         if (selectedItems.length === 0) {
           return <div>{multiple ? 'Select countries' : 'Select country'}</div>;
diff --git a/packages/web-main/src/components/selects/EventNameSelectField/index.tsx b/packages/web-main/src/components/selects/EventNameSelectField/index.tsx
index 9d9bdc7ad3..7ff9397788 100644
--- a/packages/web-main/src/components/selects/EventNameSelectField/index.tsx
+++ b/packages/web-main/src/components/selects/EventNameSelectField/index.tsx
@@ -15,7 +15,6 @@ export const EventNameSelectField: FC<CustomSelectProps> = ({
   loading,
   description,
   readOnly,
-  inPortal,
   disabled,
   size,
   hint,
@@ -39,7 +38,6 @@ export const EventNameSelectField: FC<CustomSelectProps> = ({
       required={required}
       description={description}
       size={size}
-      inPortal={inPortal}
       render={(selectedItems) => {
         if (selectedItems.length === 0) {
           return <div>select event...</div>;
diff --git a/packages/web-main/src/components/selects/GameServerSelectQueryField/index.tsx b/packages/web-main/src/components/selects/GameServerSelectQueryField/index.tsx
index 451cd07c00..c45eff710f 100644
--- a/packages/web-main/src/components/selects/GameServerSelectQueryField/index.tsx
+++ b/packages/web-main/src/components/selects/GameServerSelectQueryField/index.tsx
@@ -35,7 +35,6 @@ export const GameServerSelectQueryField: FC<CustomSelectQueryProps & GameServerS
   label = 'Game server',
   control,
   disabled,
-  inPortal,
   description,
   required,
   filters,
@@ -77,7 +76,6 @@ export const GameServerSelectQueryField: FC<CustomSelectQueryProps & GameServerS
       description={description}
       size={size}
       disabled={disabled}
-      inPortal={inPortal}
       hint={hint}
       name={selectName}
       required={required}
@@ -109,7 +107,6 @@ export const GameServerSelectView: FC<GameServerSelectQueryViewProps> = ({
   description,
   size,
   disabled,
-  inPortal,
   hint,
   required,
   loading,
@@ -159,7 +156,6 @@ export const GameServerSelectView: FC<GameServerSelectQueryViewProps> = ({
       description={description}
       size={size}
       disabled={disabled}
-      inPortal={inPortal}
       hint={hint}
       label={label}
       required={required}
diff --git a/packages/web-main/src/components/selects/ItemSelectQueryField/index.tsx b/packages/web-main/src/components/selects/ItemSelectQueryField/index.tsx
index 92d3308917..a385a371af 100644
--- a/packages/web-main/src/components/selects/ItemSelectQueryField/index.tsx
+++ b/packages/web-main/src/components/selects/ItemSelectQueryField/index.tsx
@@ -36,7 +36,6 @@ export const ItemSelectQueryField: FC<ItemSelectQueryFieldProps> = ({
   label,
   loading,
   disabled,
-  inPortal,
   readOnly,
   required,
   description,
@@ -87,7 +86,6 @@ export const ItemSelectQueryField: FC<ItemSelectQueryFieldProps> = ({
       description={description}
       size={size}
       disabled={disabled}
-      inPortal={inPortal}
       hint={hint}
       multiple={multiple}
       placeholder={placeholder}
@@ -125,7 +123,6 @@ export const ItemSelectQueryView: FC<ItemSelectQueryViewProps> = ({
   disabled,
   placeholder,
   multiple,
-  inPortal,
   hint,
   required,
   gameServer,
@@ -164,7 +161,6 @@ export const ItemSelectQueryView: FC<ItemSelectQueryViewProps> = ({
       loading={loading}
       isLoadingData={isLoadingData}
       disabled={disabled}
-      inPortal={inPortal}
       readOnly={readOnly}
       required={required}
       multiple={multiple}
diff --git a/packages/web-main/src/components/selects/ModuleSelectQueryField.tsx b/packages/web-main/src/components/selects/ModuleSelectQueryField.tsx
index ac868ab7d5..95420ca679 100644
--- a/packages/web-main/src/components/selects/ModuleSelectQueryField.tsx
+++ b/packages/web-main/src/components/selects/ModuleSelectQueryField.tsx
@@ -11,7 +11,6 @@ export const ModuleSelectQueryField: FC<CustomSelectProps> = ({
   loading,
   description,
   readOnly,
-  inPortal,
   disabled,
   size,
   hint,
@@ -49,7 +48,6 @@ export const ModuleSelectQueryField: FC<CustomSelectProps> = ({
       description={description}
       size={size}
       disabled={disabled}
-      inPortal={inPortal}
       hint={hint}
       name={selectName}
       label={label}
@@ -78,7 +76,6 @@ export const ModuleSelectView: FC<ModuleSelectViewProps> = ({
   description,
   size,
   disabled,
-  inPortal,
   hint,
   required,
   loading,
@@ -101,7 +98,6 @@ export const ModuleSelectView: FC<ModuleSelectViewProps> = ({
       hint={hint}
       disabled={disabled}
       size={size}
-      inPortal={inPortal}
       required={required}
       loading={loading}
       canClear={canClear}
diff --git a/packages/web-main/src/components/selects/PlayerSelectQueryField.tsx b/packages/web-main/src/components/selects/PlayerSelectQueryField.tsx
index b174b40f10..c66debf645 100644
--- a/packages/web-main/src/components/selects/PlayerSelectQueryField.tsx
+++ b/packages/web-main/src/components/selects/PlayerSelectQueryField.tsx
@@ -24,7 +24,6 @@ export const PlayerSelectQueryField: FC<CustomSelectQueryProps> = ({
   label,
   loading,
   disabled,
-  inPortal,
   readOnly,
   required,
   description,
@@ -53,7 +52,6 @@ export const PlayerSelectQueryField: FC<CustomSelectQueryProps> = ({
       description={description}
       size={size}
       disabled={disabled}
-      inPortal={inPortal}
       hint={hint}
       multiple={multiple}
       placeholder={placeholder}
@@ -86,7 +84,6 @@ export const PlayerSelectQueryView: FC<PlayerSelectQueryViewProps> = ({
   disabled,
   placeholder,
   multiple,
-  inPortal,
   hint,
   required,
   loading,
@@ -108,7 +105,6 @@ export const PlayerSelectQueryView: FC<PlayerSelectQueryViewProps> = ({
       loading={loading}
       isLoadingData={isLoadingData}
       disabled={disabled}
-      inPortal={inPortal}
       readOnly={readOnly}
       required={required}
       multiple={multiple}
diff --git a/packages/web-main/src/components/selects/RoleSelectQueryField.tsx b/packages/web-main/src/components/selects/RoleSelectQueryField.tsx
index 1381d75de4..299f361fda 100644
--- a/packages/web-main/src/components/selects/RoleSelectQueryField.tsx
+++ b/packages/web-main/src/components/selects/RoleSelectQueryField.tsx
@@ -21,7 +21,6 @@ export const RoleSelectQueryField: FC<CustomSelectProps> = ({
   size,
   label = 'Role',
   disabled,
-  inPortal,
   description,
   readOnly,
   canClear,
@@ -65,7 +64,6 @@ export const RoleSelectQueryField: FC<CustomSelectProps> = ({
       description={description}
       size={size}
       disabled={disabled}
-      inPortal={inPortal}
       hint={hint}
       required={required}
       loading={loading}
@@ -95,7 +93,6 @@ export const RoleSelectView: FC<RoleSelectViewProps> = ({
   description,
   size,
   disabled,
-  inPortal,
   hint,
   required,
   canClear,
@@ -118,7 +115,6 @@ export const RoleSelectView: FC<RoleSelectViewProps> = ({
       hint={hint}
       disabled={disabled}
       size={size}
-      inPortal={inPortal}
       description={description}
       required={required}
       loading={loading}
diff --git a/packages/web-main/src/components/selects/TimePeriodSelectField.tsx b/packages/web-main/src/components/selects/TimePeriodSelectField.tsx
index bc58a94827..e435614e23 100644
--- a/packages/web-main/src/components/selects/TimePeriodSelectField.tsx
+++ b/packages/web-main/src/components/selects/TimePeriodSelectField.tsx
@@ -38,7 +38,6 @@ export const TimePeriodSelectField: FC<TimePeriodSelectProps> = ({
   size,
   loading,
   disabled,
-  inPortal,
   readOnly,
   required,
   description,
@@ -56,7 +55,6 @@ export const TimePeriodSelectField: FC<TimePeriodSelectProps> = ({
       required={required}
       description={description}
       size={size}
-      inPortal={inPortal}
       render={(selectedItems) => {
         if (selectedItems.length === 0) {
           return <div>Select...</div>;
diff --git a/packages/web-main/src/routes/_auth/_global/user.$userId.role.assign.tsx b/packages/web-main/src/routes/_auth/_global/user.$userId.role.assign.tsx
index cd63385a62..64713db142 100644
--- a/packages/web-main/src/routes/_auth/_global/user.$userId.role.assign.tsx
+++ b/packages/web-main/src/routes/_auth/_global/user.$userId.role.assign.tsx
@@ -78,7 +78,7 @@ function Component() {
             <form onSubmit={handleSubmit(onSubmit)} id="assign-user-role-form">
               <CollapseList.Item title="General">
                 <TextField readOnly control={control} name="id" label="User" />
-                <RoleSelectQueryField inPortal control={control} name="roleId" label="Role" />
+                <RoleSelectQueryField control={control} name="roleId" label="Role" />
                 <DatePicker
                   mode="absolute"
                   control={control}
diff --git a/packages/web-main/src/routes/_auth/gameserver.$gameServerId/-components/-ShopListingCreateUpdateForm.tsx b/packages/web-main/src/routes/_auth/gameserver.$gameServerId/-components/-ShopListingCreateUpdateForm.tsx
index 40e2e99eda..7eebe3553a 100644
--- a/packages/web-main/src/routes/_auth/gameserver.$gameServerId/-components/-ShopListingCreateUpdateForm.tsx
+++ b/packages/web-main/src/routes/_auth/gameserver.$gameServerId/-components/-ShopListingCreateUpdateForm.tsx
@@ -212,7 +212,6 @@ export const ShopListingCreateUpdateForm: FC<ShopListingCreateUpdateFormProps> =
                         name={`items.${index}.itemId`}
                         loading={isLoading}
                         readOnly={readOnly}
-                        inPortal
                       />
                       <TextField
                         control={control}
diff --git a/packages/web-main/src/routes/_auth/gameserver.$gameServerId/shop.listing.import.gameserver.tsx b/packages/web-main/src/routes/_auth/gameserver.$gameServerId/shop.listing.import.gameserver.tsx
index ca9d376943..cc0935e225 100644
--- a/packages/web-main/src/routes/_auth/gameserver.$gameServerId/shop.listing.import.gameserver.tsx
+++ b/packages/web-main/src/routes/_auth/gameserver.$gameServerId/shop.listing.import.gameserver.tsx
@@ -109,7 +109,6 @@ function Component() {
               description="Shoplistings that will be copied to this game server"
               control={control}
               multiple
-              inPortal
               render={(selectedShopListings) => {
                 if (selectedShopListings.length === 0) {
                   return <p>Select shop listing</p>;