How to have a form in a modal behind a popover menu action - ReactBootstrap?

Viewed 17

I have a Popover that contains a List Group of menu choices. Upon clicking "edit" from the list group, my code brings up a modal with a form in it. I have solved a previous issue of the modal closing when clicked anywhere inside the modal by adding

   e.stopPropagation();
   e.preventDefault();
   e.nativeEvent.stopImmediatePropagation();

to the onClick listener for my Popover component. This addition however does not allow me to click on form input fields within the modal, specifically the file input fields, clicking on Select File does nothing. I removed the preventDefault action and it allows me to select files but refreshes the page upon form submissions. How can I achieve proper form submission from a modal that is being displayed after an action is taken in a Popover?

Full code is as follows (EditSong is my Modal with Form):

    const PopoverMenu = React.forwardRef((props, ref) => {
        return (
            <Popover id="popover-basic" {...props} ref={ref}>
                <Popover.Body className="pt-2 ps-2 pb-2 pe-2">
                    <ListGroup variant="flush">
                        <ListGroup.Item action>Delete</ListGroup.Item>
                        <ListGroup.Item
                            action
                            onClick={() => setShowEditModal(true)}
                        >
                            Edit
                        </ListGroup.Item>
                        <EditSong
                            show={showEditModal}
                            setShow={setShowEditModal}
                        />
                    </ListGroup>
                </Popover.Body>
            </Popover>
        );
    });


    <OverlayTrigger
        trigger="click"
        rootClose
        placement="bottom"
        overlay={
            <PopoverMenu/>
        }
    >
        <i
            className="fa-solid fa-ellipsis"
            style={{ fontSize: "1.5em", cursor: "pointer" }}
        >
        </i>
    </OverlayTrigger>
0 Answers
Related