Herkese merhaba arkadaşlar aşağıdaki kodlarım ile düğmenin bulunduğu konuma göre
aşağı veya yukarı açılmasını sağlayan bir kod betiği.

Görselde de gördüğünüz gibi yatay kaydırma çubuğu kaydığı için fixed nedeni ile pencerenin boyutlarına göre konumlandırıyor.

Kaydırma çubuğu bir tablo bileşeni olduğu için kontrol ettirmem mümkün değil.
Düğmenin konumu değiştiği zaman yakalamamız gerekiyor.

Açılır menüde relative kullanmak istediğim zaman
kapsayıcısının dışına çıkamıyor.
Hatta bulunduğu etiketinin boyutunu da uzatıyor.

O yüzden fixed kullanıp modal gibi çalıştırmak istiyorum.

Yardımlarınız için şimdiden teşekkürler.

import { useState, useRef } from "react"
export default function MultiColumnComboBox({ data }) {
    const modalRef = useRef(null);
    const buttonRef = useRef(null);
    const [position, setPosition] = useState({
        top: 0,
        left: 0,
        width: 500,
        height: 200,
        open: false
    })
    const inputClick = (e) => {
        const buttonRect = e.target.getBoundingClientRect();        
        if(!position.open) {
            if (buttonRect.top + buttonRect.height + position.height > window.innerHeight) {
                console.log("Modal Yukarı")
                setPosition({
                    ...position,
                    top: buttonRect.top - position.height,
                    left: buttonRect.left,
                    open: true
                })
            } else if(buttonRect.top + position.height < window.innerHeight) {
                console.log("Modal Aşağı")
                setPosition({
                    ...position,
                    top: buttonRect.top + buttonRect.height,
                    left: buttonRect.left,
                    open: true
                })
            }
        } else {
            setPosition({
                ...position,
                top: 0,
                left: 0,
                open: false
            })
        }
    }
    return (
        <>
            <input ref={buttonRef} type="button" onClick={inputClick} className={className} />
            {
                position.open && (
                    <div
                        ref={modalRef}
                        className={` left-[${position.left}px] top-[${position.top}px] w-[${position.width}px] h-[${position.height}px] bg-white z-10 fixed`}
                    >
                        <button type="button" onClick={inputClick}>Kapat</button>
                    </div>
                )
            }
        </>
    )
}