Why can't I interact with my components within my modal?

[plush lynx]

I am trying to create a modal and for some reason I cannot interact with any components like buttons or inputs within my modal.

I am building a React Portal, so that my modal and page are separate from each other and that the modal is not "running" in the background when it is not in use

'use client'
import {useState, useLayoutEffect} from "react"
import { createPortal } from "react-dom"

const createWrapperAndAppendToBody = (wrapperId: string) => {
    if(!document) return null
    const wrapperElement = document.createElement("div")
    wrapperElement.setAttribute('id', wrapperId)
    document.body.appendChild(wrapperElement)
    return wrapperElement
 }

 function ReactPortal({children, wrapperId}: {children: React.ReactElement; wrapperId: string}) {
    const [wrapperElement, setWrapperElement] = useState<HTMLElement>()

    useLayoutEffect(() => {
        let element = document.getElementById(wrapperId)
        let systemCreated = false

        if(!element) {
            systemCreated = true
            element = createWrapperAndAppendToBody(wrapperId)
        }
        setWrapperElement(element!)

        return () => {
            if(systemCreated && element?.parentNode) {
                element.parentNode.removeChild(element)
            }
        }
    },[wrapperId])

    if(!wrapperElement) return null
    return createPortal(children, wrapperElement)

 }

 export default ReactPortal

I am pretty sure this is fine.

import React, {useEffect} from "react";
import ReactPortal from "./ReactPortal";


interface ConfirmationModalProps {
    isOpen: boolean;
    handleClose: () => void 
    children: React.ReactNode

}

export const ConfirmationModal =({children, isOpen, handleClose}:ConfirmationModalProps) => {
//allows to press Escape Key 
 useEffect(() => {
    const closeOnEscapeKey = (e: KeyboardEvent) =>
        e.key === 'Escape' ? handleClose() : null
        document.body.addEventListener('keydown', closeOnEscapeKey)
        return () => {
            document.body.removeEventListener('keydown', closeOnEscapeKey)
        };
 },[handleClose])

 //stops scrolling fuction when modal is open
 useEffect(() => {
    document.body.style.overflow = 'hidden';
    return (): void => {
        document.body.style.overflow = 'unset'
    }
 },[isOpen])

 if(!isOpen) return null

 return (
   <ReactPortal wrapperId='react-portal-modal-container'>
    <>
        <div className='fixed top-0 left-0 w-screen h-screen z-40 bg-neutral-800 opacity-50' />
        <div className='fixed  rounded flex flex-col box-border min-w-fit overflow-hidden p-5 bg-zinc-800 inset-y-32 inset-x-32'>
            <button className='py-2 px-8 self-end font-bold hover:bg-violet-600 border rounded' 
            onClick={() => console.log('Pressed')}>
                Close
            </button>
        <div className='box-border h-5/6'>{children}</div>
        </div>
    </>
   </ReactPortal>
 )
}

This is my reusable Modal component so that I do not have to build a new modal from scratch. The close button within here is no also not working/can't event click on it via a console.log('pressed')

Here is a picture of the modal, but none of the buttons work, however, my Escape key function does work. Any thoughts would be great!

[light thunder]

What componet has the handleClose?

[plush lynx]

normally it would be that button, however, I am trying to console.log('pressed') just to see if the button is able to be pressed, which it is not

whenever I put anything in there that requires interaction like an input or button, it is not able to be interacted with

[light thunder]

try it in your ConfirmationModal:

const onClose = useCallback(() => {
handleOnClose()
console.log('something here')
}, [])

onClick={onClose} and pass type='button'

[plush lynx]

I am running into the issue that any input, or button is not able to be interacted with

when I hover and try to interact with these buttons or I add any input, I am unable to interact with ti

[lilac charm]

well, if you want your z-index to be applied, you need to add display:absolute or relative, I couldnt see if you add it in another css file or not but can u check it ?

and also, your first div 's <div className='fixed top-0 left-0 w-screen h-screen z-40 bg-neutral-800 opacity-50' /> , z index is probably higher than the button, so you should add another z-index to it like z-50 on the second dive which is : <div className='fixed rounded flex flex-col box-border min-w-fit overflow-hidden p-5 bg-zinc-800 inset-y-32 inset-x-32'>

[plush lynx]

that was it!!!! it was the dang z-value

[lilac charm]

😅