How can I prevent automatic close at [ok] button on "mdc-dialog" material web component?

Question

At first, I created my web application (html, javascript & webpack bundle), combined using Material Design Components. In my html page has use mdc-dialog component (Dialog).

Below is mdc-dialog in my html. It is input data dialog. Its section, mdc-dialog__actions, there are 2 buttons, [cancel] and [ok] button.

At [ok] button, I added css class name for get element by css for customization to validte data before save. My purpose, if input data cannot pass validate, there is the other dialog for notify the error, and main input data dialog has remain freeze appear.

ฺฺBut now in actual work, when I click on [ok] button, the main input data dialog is suddenly closed.

<div class="dialog-add-userpass mdc-dialog mdc-dialog--fullscreen">
    <div class="mdc-dialog__container">
        <div class="mdc-dialog__surface" role="dialog" aria-modal="true" aria-labelledby="my-dialog-title" aria-describedby="my-dialog-content">
            <div class="mdc-dialog__header">
                <h2 class="mdc-dialog__title" id="my-dialog-title">Add new User-Pass</h2>
                <button class="mdc-icon-button material-icons mdc-dialog__close" data-mdc-dialog-action="close">close</button>
            </div>
            <div class="mdc-dialog__content" id="my-dialog-content">
                <label class="txt-new-pass-no mdc-text-field mdc-text-field--outlined w-100p">
                    <span class="mdc-notched-outline">
                        <span class="mdc-notched-outline__leading"></span>
                        <span class="mdc-notched-outline__notch">
                            <span class="mdc-floating-label" id="lbl-pass-no">Pass No.</span>
                        </span>
                        <span class="mdc-notched-outline__trailing"></span>
                    </span>
                    <input type="text" class="mdc-text-field__input" aria-labelledby="lbl-pass-no" aria-controls="pass-no-help" aria-describedby="pass-no-help" id="inputPassNo" required minlength="4">
                </label>
                ........
                ........
            <div class="mdc-dialog__actions">
                <button type="button" class="mdc-button mdc-dialog__button" data-mdc-dialog-action="cancel">
                    <div class="mdc-button__ripple"></div>
                    <span class="mdc-button__label">Cancel</span>
                </button>
                <button type="button" class="btn-add-save mdc-button mdc-dialog__button" data-mdc-dialog-action="ok">
                    <div class="mdc-button__ripple"></div>
                    <span class="mdc-button__label">Add new</span>
                </button>
            </div>
        </div>
    </div>
    <div class="mdc-dialog__scrim"></div>
</div>

In my javascript, there are getting element and set eventListener to [ok] button.

import { MDCDialog } from '@material/dialog';

const dialogAddUserPass = new MDCDialog(document.querySelector('.dialog-add-userpass'));
dialogAddUserPass.scrimClickAction = "";
dialogAddUserPass.escapeKeyAction = "";
.......
.......

const btnAddSave = document.querySelector(".btn-add-save");
btnAddSave.addEventListener('click', async (e) => {
    e.preventDefault();
    txtPassNo.value = txtPassNo.value.trim();
    txtPassCode.value = txtPassCode.value.trim();
    txtEmail.value = txtEmail.value.trim();
    txtFullName.value = txtFullName.value.trim();
    ......
    ......
    } else {
        displayDialogMessage(validAddNew.message);
        dialogAddUserPass.open();
    }
});

So, how can I prevent automatic close at [ok] button on mdc-dialog web component?

Thank you in advance

Answer 1

I found solution by myself. It must remove "data-mdc-dialog-action" attribute from button that you don't want to have default action.

<div class="mdc-dialog__actions">
    <button type="button" class="mdc-button mdc-dialog__button" data-mdc-dialog-action="cancel">
         <div class="mdc-button__ripple"></div>
         <span class="mdc-button__label">Cancel</span>
    </button>
    <button type="button" class="btn-add-save mdc-button mdc-dialog__button"> <!-- remove 'data-mdc-dialog-action' attribute from button -->
         <div class="mdc-button__ripple"></div>
         <span class="mdc-button__label">Add new</span>
    </button>
</div>