Zimbra Modern ModalDialog cancel button functionality implementation

[sam007]

Hi all,
I am creating a zimlet and in that i am using dialog from "import { ModalDialog } from '@zimbra-client/components';"
In modal dialog by default there are 2 buttons action and cancel button and here for cancel button i am not able to assign my custom function, using onclose value i am able to assign but that gets affected to my close button also, i dont want that.
is there anyway to assign separate function for cancel and close buttons? please help.

[sitaram.mulik]

Short answer: There is no direct way to assign separate functions. Both the cancel button and the header close button call the same onClose prop.

Workaround: You can use event object received in the onClose function to differentiate the target element. One of such example is provided below :

Code: Select all

onClose={(e) => {
    if (e.target.tagName === 'BUTTON' && e.target.textContent.trim()) {
        // Cancel button clicked
        handleCancel();
    } else {
        // close button clicked
        handleClose();
    }
}}

Limitation of this approach: It relies on the cancel button always having text content. If the label is ever removed or changed to an icon, this breaks silently.