We Keep Coding

How to avoid the React Datepicker to close when clicking outside

I'm using the react-datepicker component on my application (https://www.npmjs.com/package/react-datepicker).
I want to close the datepicker calendar only when I click on a certain element that I created on the surrounding of the component, but the default behavior of the datepicker is to close when I click in any place outside him.
How can I do this? I tried this:
<ReactDatePicker selected={startDate}
startOpen
shouldCloseOnSelect={false}
withPortal
onClickOutside={(e: any)=> { e.preventDefault(); e.stopPropagation(); }} />
But it didn't worked.

MUI: button within a MenuItem: When I click the button without clicking the MenuItem?

I am using MUI's Menu / MenuItem to build a menu of missions / tasks like this screenshot:
The MenuItem is clickable:
// ... other code
<MenuItem
value={mission.issueIdentifierId}
sx={{px: 0.5}}
onClick={() => handleMenuItemClick(mission.issueIdentifierId)}
>
<UploadMissionCard mission={mission} />
</MenuItem>
// ... other code
and when it is clicked, a modal window will pop up to show the detail info.
Now, within the MenuItem, there is the UploadMissionCard component, and in some cases, the UploadMissionCard would contain a MUI Button called Abort. On clicking the button, a different warning modal window will pop up.
However, when I click the button, the clicking action propagates to the menuItem as well and the menuItem is also clicked. So both modal window are opened.
In MUI, how can I put a Button inside a MenuItem and stop the clicking action on the button from passing on to the parent MenuItem?

Call stopPropagation method on button click event
<button onClick={(event) => {
event.stopPropagation();
}}></button>

Keypress Refer to Topmost Modal

I have a Modal component, which uses Bulma CSS' modal:
<script>
import { createEventDispatcher } from 'svelte';
export let active;
export let closeable = true;
const dispatch = createEventDispatcher();
const closeModal = () => {
active = false;
dispatch("closeModal");
};
const closeModalSoft = () => {
if (closeable) {
closeModal();
}
};
const closeModalKeyboard = (event) => {
if (event.key === "Escape" && closeable) {
closeModal();
}
};
</script>
<svelte:window on:keydown={closeModalKeyboard}/>
<div class="modal is-clipped" class:is-active={active}>
<div class="modal-background" on:click={closeModalSoft}/>
<div class="modal-content">
<div class="container">
<slot />
</div>
</div>
{#if closeable}
<button class="is-large modal-close" aria-label="close" on:click={closeModal}/>
{/if}
</div>
It should allow for arbitrary nesting, so you can for example have a modal over a modal over the rest of the website.
I would like to allow for modals be closed by pressing the close button, clicking outside of the modal or using the escape key. I would like this to operate like a stack: the topmost modal gets closed first. (Note: If a modal is not closeable as shown in my code, it just means that the modal can only be closed by manipulating active externally).
Currently, the close button and clicking outside the modal work with nested modals. However, escape will always close all modals, instead of just the topmost one. But, given the code, I think this is to be expected.
What would I need to change such that only the topmost (closeable=true) modal gets closed?
I have thought about the following approaches, but I feel like there must be better ways:
On escape, determine the element at the centre of the screen, and only if its ID is equal to some ID I will give each modal, close it.
On escape, query the DOM element and see if it has any children/siblings after itself that have both the modal and is-active classes. If so, ignore the keypress.
Perhaps use :focus or other modifiers on the topmost element and then a similar approach as the one above.

Adding the event on the window is the wrong approach which leads to this issue.
Modals should not allow focus to leave it, that being the case you should be able to handle the Escape press on the Modal itself. The easiest way to get the focus trap "for free" would be to use a native dialog element (though it getting support is still relatively recent).
A manual focus trap would have to steer focus on opening/closing and on any Tab press. There might be libraries that already implement this. Actually, I would not recommend implementing such generic components anyway and suggest the use of a component library instead. It is easy to get accessibility and things like keyboard interactions very wrong.
Guidelines for Modals: https://www.w3.org/WAI/ARIA/apg/patterns/dialogmodal/

How can i dismiss Dialog box on click confirm react spectrum ModalTrigger?

I have a dialog box which I am using from ModalTrigger from react spectrum(old version). The dialog box has two buttons, Okay and Cancel.Nothing to do on cancel, but the action should be triggered on clicking of Okay, the dialog box should close and action should initiate. I am able to initiate action but dialog box is not closing.
Code:
<ModalTrigger>
<Button label="Do something" variant="action"></Button>
<Dialog
confirmLabel="Confirm"
cancelLabel="Cancel"
mode="confirmation"
onConfirm={props.confirmAction}
keyboardConfirm="true"
backdropClickable={true}>
{title}
</Dialog>
</ModalTrigger>
How can I close the dialog button when user clicks onConfirm and then start props.confirmAction?As of now, the dialog box don't close until props.confirmAction completes.

We can achieve it in 2 ways.
Write a method and trigger dialog.dismiss followed by props. confirmAction
const onClickConfirm ()=>{
dialog.dismiss()
props. confirmAction()
}
Use onDismiss instead of onConfirm

Vue & Quasar - Sharing a custom dialog component

I've looked at Reuse Quasar Dialog plugin with custom component on another component that does not have any answers and I have close to the same question but I have structured code a bit different. On my parent form I have
<q-dialog prevent-close v-model="showProfileForm" class="profileDialog">
<profile-dialog></profile-dialog>
</q-dialog>
and my profile-dialog is a form that is a simple template
<template>
<q-stepper
It seems that if I wrap the component on the parent page the dialog will open BUT I cannot pass in
prevent-close
or add a
#hide
I need to know when the dialog form is closed to save changes or prevent closing unless a button is clicked. Even adding the prevent-close in the parent does not work
<q-dialog prevent-close v-model="showProfileForm" class="profileDialog">
<profile-dialog></profile-dialog>
</q-dialog>
If I create the form inside a q-dialog, so it becomes a dialog inside a dialog and set the v-modal to true when it closes the parent form still has the slight gray overlay until the page is clicked and the form will not open a second time

You can use the emit event in profile dialog for pass event so that you know that form is submitted or not and use persistent so that User cannot dismiss Dialog if clicking outside of it or hitting ESC key; Also, an app route change won't dismiss it.
<q-btn v-if="step == 4" #click="FinishClick" color="primary" label="Finish"/>
methods: {
FinishClick() {
alert("Finish Click From Profile Dialog");
this.$emit("profile_dialog_emmit",{'MSG':'TestData'})
}
}
<profile-dialog #profile_dialog_emmit="my_fun($event)"></profile-dialog>
In Parent Component.
methods:{
my_fun(data){
console.log("Assad");
alert("From Index Check Console for Data");
console.log(data)
this.showProfileForm=false;
}
}
Demo - https://codesandbox.io/s/clever-kilby-qf1gz
Go to the final step and click on finish will trigger the event and you can see an alert from the parent component and check the console for data displayed from the parent component.