Откроется выпадающий список реагирования

Question

У меня есть пользовательский модал, где у меня есть 2 компонента выбора реакции внутри. Модальное тело готово к автоматической прокрутке, если содержимое превышает его размер, но раскрывающийся список компонентов реагировать на выбор открывается внутри модального с этим переполнением, что я не ищу. Без переполнения работает нормально.

Я работаю с модулями CSS.

<div className={styles.modalBody}>
    {this.props.children}
</div>

.modalBody {
    padding: padding;
    flex: 1 1 auto;
    height: 45vh;
    max-height: 100%;
    overflow: auto;
}

<Select
    id={this.props.id}
    className={styles[this.props.selectType ? this.props.selectType : 'selectWhite']}
    classNamePrefix="select"
    name={this.props.name}
    value={selectedOption ? selectedOption : this.props.value}
    placeholder={this.props.placeholder}
    onChange={this.onChange}
    options={this.props.options}
    isDisabled={this.props.disabled}
    isSearchable={false}/>

Как я могу это исправить? Спасибо!:)

Answer 1

Вы хотите посмотреть на menuPortalTarget двигательный Об этом есть тема в расширенной документации, особенно с модальным примером. Что-то вроде:

  <Select
    {...otherProps}
    menuPortalTarget={document.body} />

Answer 2

Вы можете использовать положение меню как фиксированное, установив опору, что, в свою очередь, сделает ваше раскрывающееся меню фиксированным как положение

      <Select menuPosition="fixed" />

Answer 3

Полный пример того, как отобразить меню выбора в модальном окне (я добавил комментарии к важным строкам и пошаговое объяснение ниже):

      import React, { useRef } from 'react';
import Select from 'react-select';
import { Dialog } from '@mui/material';

const MyModal: React.FC = () => {
    const ref = useRef<HTMLDivElement>(null);

    return (
        <Dialog
            // ...
            ref={ref} // stores a ref to the DOM node of the modal component
        >
            <Select
                // ...
                menuPortalTarget={ref.current} // pass the ref to `Select` to portal the select menu to the given DOM node
                styles={{
                    menuPortal: defaultStyles => ({  
                        ...defaultStyles,
                        paddingBottom: '10px', // style the menu when it's portalled into the DOM node given to `menuPortalTarget`
                    }),
                }}
            />
        </Dialog>
    );
};

export default MyModal;

Пошаговое объяснение :

1. Я создаю с помощьюReact.useRefкрюк.
2. Я получаю ссылку наDialogкомпонент (который в этом примере является диалоговым компонентом MUI (но может быть любым другим модальным компонентом) черезref={ref}
3. я передаю этоrefкSelectкомпонент черезmenuPortalTarget={ref.current}.
4. Мне пришлось настроить размещение меню черезpaddingBottom: '10px',потому что в моем случае меню выглядело бы слишком высоко. Возможно, вам придется настроить это по-другому.

Дополнительные комментарии :

• document.bodyне сделал трюк для меня. В этом случае меню появилось за модальным для меня.
• К сожалению,react-selectдокументация по порталу не содержит примеров кода, поэтому я надеюсь, что этот пример будет вам полезен.