Выпадающий список с абсолютным по-прежнему немного увеличивает модальную высоту при открытии. ⇐ Javascript

[Anonymous]

Я создаю модальное окно в React с помощью Tailwind CSS. Внутри модального окна я создал собственный раскрывающийся список с помощью кнопки и абсолютно позиционированного меню.
Однако, когда раскрывающийся список открывается, модальная высота немного увеличивается (или кажется, что она смещается), хотя раскрывающийся список позиционируется с абсолютным .
Вот соответствующий код:

Код: Выделить всё

import { useEffect, useState } from 'react';
import { IoMdClose } from 'react-icons/io';
import { RiArrowDropDownLine } from 'react-icons/ri';

const NewTransactionModal = ({ isModalOpen, onCloseModal }) => {
const [isDropdownOpen, setIsDropdownOpen] = useState(false);

useEffect(() => {
if (!isModalOpen) return;

const handleKeyDown = (e) => e.key === 'Escape' && onCloseModal(false);

document.addEventListener('keydown', handleKeyDown);
return () => document.removeEventListener('keydown', handleKeyDown);
}, [isModalOpen, onCloseModal]);

if (!isModalOpen) return null;

return (




Date

 setIsDropdownOpen((prev) => !prev)}
>

Select Option




{isDropdownOpen && (

[list]
[*]
Option 1

[*]
Option 2

[*]
Option 3

[/list]

)}




);
};

Поскольку в раскрывающемся меню используется позиция: Absolute, а в родительском меню — позиция: относительная, я ожидаю, что это вообще не повлияет на модальную высоту. Однако, когда раскрывающийся список открывается, модальная высота немного увеличивается или визуально смещается.
Почему это все еще происходит, хотя раскрывающийся список абсолютно позиционирован? Связано ли это с модальным контейнером, использующим абсолютный и h-экран? Будет ли использование фиксированной вставки-0 правильным подходом?

Подробнее здесь: https://stackoverflow.com/questions/798 ... hen-opened