issue with components visibility
Answered
Brown bear posted this in #help-forum
Brown bearOP
i have this dialog component from shadcnui which opens when the map is clicked
but in the above, it closes whenever anywhere on the screen is clicked, so even within the dialogue box, which I dont want, I want it only to close if the x is clicked.
when I change that last line to
it doesn't close when I click anywhere on the screen, even on the x, but it does open properly
How would i fix it so that it only closes when i click on the x?
const [dialogOpen, setDialogOpen] = useState(false); // State for controlling dialog visibility
...
const onMapClick = (event: MapMouseEvent) => {
if (!dialogOpen) {
if (event.detail.latLng) {
const { lat, lng } = event.detail.latLng;
if (lat !== undefined && lng !== undefined) {
const newMarker = {
lat: lat,
lng: lng,
};
setInfoWindowTexts((current) => [...current, ""]);
setEditable((current) => [...current, true]); // Set as initially editable
setOpenInfoWindows((current) => [...current, true]);
setMarkers((current) => [...current, newMarker]);
setDialogOpen(true);
}
}
}
};
...
return (
...
<Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
...but in the above, it closes whenever anywhere on the screen is clicked, so even within the dialogue box, which I dont want, I want it only to close if the x is clicked.
when I change that last line to
<Dialog open={dialogOpen} onOpenChange={() => setDialogOpen}>it doesn't close when I click anywhere on the screen, even on the x, but it does open properly
How would i fix it so that it only closes when i click on the x?
6 Replies
Brown bearOP
tried both but doesnt seem to work
adding the dialogcontent seemed to have no difference
and alertdialog had similar issue but for some reason insted of the dialogue closing when i clciked anywhere on the screen, it was closing when i clicked iwthin the dialoge box (not on the close button), but not closing when i clicked outside the dialogue box (edges of screen)
Brown bearOP
I have this dialog component from shadcnui which I set up for when the map from google maps api is clicked
but it closes whenever anywhere on the screen is clicked, so even within the dialogue box, which I don't want, as I can't enter any information within the dialog box because of that. I want it only to close if the x is clicked.
when I change that last line to
it doesn't close when I click anywhere on the screen, even on the x, but it does open properly.
There is no onClose event on the dialog component.
How would i fix it so that it only closes when i click on the x?
<Map
onClick={onMapClick}
... >
...
const [dialogOpen, setDialogOpen] = useState(false); // State for controlling dialog visibility
...
const onMapClick = (event: MapMouseEvent) => {
if (!dialogOpen) {
if (event.detail.latLng) {
const { lat, lng } = event.detail.latLng;
if (lat !== undefined && lng !== undefined) {
const newMarker = {
lat: lat,
lng: lng,
};
setDialogOpen(true);
...
}
}
}
};
...
return (
...
<Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
...but it closes whenever anywhere on the screen is clicked, so even within the dialogue box, which I don't want, as I can't enter any information within the dialog box because of that. I want it only to close if the x is clicked.
when I change that last line to
<Dialog open={dialogOpen} onOpenChange={() => setDialogOpen}>it doesn't close when I click anywhere on the screen, even on the x, but it does open properly.
There is no onClose event on the dialog component.
How would i fix it so that it only closes when i click on the x?
Brown bearOP
ok i fixed it by removing the dialogtrigger
Answer