1

I'm working on a system that uses a LWC modal to verify someone, once verified the full account record page displays. However, we've started to notice a bug where occasionally, if the person is verified and the page is refreshed, the verification process begins again but if the modal is closed fast enough (cancelling the verification process) the record page still shows as if they had passed verification. To fix this we need to prevent a user from being able to cancel the verification process until the account is un-verified onload of the account. The un-verification is happening via a call to apex and it isn't instantaneous and the bug in question is related to the user closing the cmp modal before the un-verify apex call is able to complete. So I want to only render the x on the modal after we get a successful response from the apex call that un-verifys the account this scenario called out in the bug would be eliminated.

Here's what I've done so far, however the bug is still occurring.

verification.js

    connectedCallback(){
    this.disableVerifyButton = false;
    this.isModalOpen = true;
    this.showCloseButton = false;

    unVerifyMemberAccount({recordId : this.recordId}).then(() => {
        this.showCloseButton = true;
    });
}

verification.html

<template if:true={showCloseButton}>
   <button class="slds-button slds-button_icon slds-modal__close slds-button_icon-inverse" title="Close" onclick={handleCancelOrClose}>
   <lightning-icon icon-name="utility:close"
         alternative-text="close"
         variant="inverse"
         size="small" ></lightning-icon>
         <span class="slds-assistive-text">Close</span>
       </button>
</template>

This successfully causes a delay in the x button from rendering, it only appears when a checkbox on the modal is selected, see photoenter image description here but occasionally the bug still occurs. What am I doing wrong to make it so this button ONLY shows when its 100% confirmed the unVerify callout has been successfully completed?

1 Answer 1

0

You need to use async function in js to avoid this. An async function is a function declared with the async keyword. Async functions are instances of the AsyncFunction constructor, and the await keyword is permitted within them. The async and await keywords enable asynchronous, promise-based behavior to be written in a cleaner style, avoiding the need to explicitly configure promise chains.

JS:

async connectedCallback(){
   this.disableVerifyButton = false;
   this.isModalOpen = true;
   this.showCloseButton = false;

   await unVerifyMemberAccount({recordId : this.recordId}).then(() => {
      this.showCloseButton = true;
   });
}
2
  • i added these keywords but unfortunately the bug is still occurring.
    – verycold
    Oct 26, 2021 at 13:32
  • This should work fine. But if you say so you can try setTimeout function to add delay to set check true. Replace this.showCloseButton = true; with code given. new Promise(resolve => setTimeout(() => { this.showCloseButton = true; }, 500) ); Oct 27, 2021 at 10:22

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .