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>