Merge pull request #1757 from gettakaro/bugfix/select-width

bugfix: always render select in portal
gettakaro · Nov 1, 2024 · 464fa85 · 464fa85
2 parents 2a6aaf6 + f17f1a1
commit 464fa85
Show file tree

Hide file tree

Showing 22 changed files with 25 additions and 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
@@ -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/...ages/lib-components/src/components/data/Table/subcomponents/Pagination/PageSizeSelect.tsx b/...ages/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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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}