Select with overflow hidden or scroll become weird

[anatawa12]

For menu popup, overflow scroll ignores overflow as expected. however, for select options popup, the selection list popup is hide by overflow hidden or scroll

"use client"

import {
    Button,
    Card,
    Menu,
    MenuHandler, MenuItem,
    MenuList,
    Option,
    Select,
    Typography
} from "@material-tailwind/react";
import React from "react";

export default function Page() {
    return (
        <div className="m-4 flex flex-col overflow-hidden w-full gap-3">
            <main className="flex-shrink overflow-hidden flex">
                <Card className="w-full p-2 flex-grow flex-shrink flex">
                    <div className={"flex flex-shrink-0 flex-grow-0 flex-row"}>
                        <Typography className="cursor-pointer py-1.5 font-bold flex-grow-0 flex-shrink-0">
                            Manage Packages
                        </Typography>
                    </div>
                    <Card className="w-full overflow-x-auto overflow-y-scroll">
                        <table className="relative table-auto text-left">
                            <thead>
                            <tr>
                                <th className={`sticky top-0 z-10 border-b border-blue-gray-100 bg-blue-gray-50 p-2.5`}><Typography
                                    variant="small" className="font-normal leading-none">A</Typography></th>
                                <th className={`sticky top-0 z-10 border-b border-blue-gray-100 bg-blue-gray-50 p-2.5`}><Typography
                                    variant="small" className="font-normal leading-none">B</Typography></th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr className="even:bg-blue-gray-50/50">
                                <td className={`p-2.5 w-1`}>
                                    {/* This is broken: popup is not shown out of the card */}
                                    <Select value={"1.0.0"} labelProps={{className: "hidden"}} className="border-blue-gray-200">
                                        <Option value="0.0.1">0.0.1</Option>
                                        <Option value="0.0.1">0.0.1</Option>
                                        <Option value="0.0.1">0.0.1</Option>
                                        <Option value="0.0.1">0.0.1</Option>
                                        <Option value="0.0.1">0.0.1</Option>
                                    </Select>
                                </td>
                                <td className={`p-2.5 w-1`}>
                                    <Menu>
                                            <MenuHandler className={"pl-2 pr-2"}>
                                            <Button className={"pl-4 pr-3"}>Menu</Button>
                                            </MenuHandler>
                                        <MenuList>
                                            <MenuItem>Open Project Folder</MenuItem>
                                            <MenuItem>Make Backup</MenuItem>
                                            <MenuItem>Make Backup</MenuItem>
                                            <MenuItem className={"bg-red-700 text-white"}>Remove Project</MenuItem>
                                        </MenuList>
                                    </Menu>
                                </td>
                            </tr>
                            </tbody>
                        </table>
                    </Card>
                </Card>
            </main>
        </div>
    );
}

[BadMachine]

@anatawa12 Having kinda the same issue. I found out the problem is that select container div has position: relative, but options liist with position: absolute is the CHILD of container PARENT div. I guess there is no "simple" solution, cuz once u change positioning on the PARENT container div all styles go wrong.

PS: Sry, but this is the one of the worst component collections I've ever seen.

[BadMachine]

@anatawa12 try lockScroll prop - it helps with overflow issue, but has another problem) The further investigation shows that this option spawns an overlay div with fixed position. If you change its zIndex then problem will dissapear.

However the main problem of this lib is that you need to implement a huge pile of tricks and workarounds to make it work. Also there is no id's for specific elements (for the overlay for example or for some specific select parts )

The final solution for me was to change theme for select a bit: styles: { base: { container: { width: "w-full", minWidth: "min-w-SOMEVALUE [&>div]:!z-20", },

and set overflow-auto for parent container

[anatawa12]

I'm using small reimplementation of select with MenuList as a workaround and it works.