У меня есть выпадающее меню, отображаемое внутри таблицы: 
It's a long dropdown list containing 16 items. So when I click on it and try to scroll down, to reach the last items, this happens:
The whole table scrolls down, and the drop down list gets dragged along. So when I try to reach the last items, I couldn't. And the whole table UI gets messed-up.
This is the dropdown list code:
const statusDropDown = (
{this.state.statusUpdateDropDownValue}
{Object.entries(listeDesStatus).map(([key, value], i) => {
console.log("INSIDE TABLE, value is");
console.log(value);
return (
{value}
);
})}
);
And this is where it's rendered:
{Object.entries(this.state.operationSavInformation).map(
([key, value]) =>
key !== "id" &&
(key === "Status" ? (
{key}
{statusDropDown}
) : (
{key}
{value}
))
)}
I have made some research and found-out that fixing the height might solve this problem:
const statusDropDown = (
{this.state.statusUpdateDropDownValue}
{Object.entries(listeDesStatus).map(([key, value], i) => {
console.log("INSIDE TABLE, value is");
console.log(value);
return (
{value}
);
})}
And this is the result:
введите описание изображения здесь
Хотя этот вид решает проблему (я могу получить доступ к последним элементам), по какой-то причине это вызвало побочный эффект с первым элементом. Кроме того, я действительно хотел исправить высоту выпадающего списка И сделать его прокручиваемым. Например: показаны два элемента, а чтобы увидеть остальные, пользователь может прокрутить вниз раскрывающийся список. Это выполнимо?