How Do I Close a Specified Pop-up Window When OpenCustomDialog Is Used?

Source: Dev.to

Problem Description

When using openCustomDialog to create custom pop-up dialogs, if multiple dialogs are opened on the page, how can you correctly close a specified dialog?

Background Knowledge

In the UIContext, the getPromptAction method retrieves a PromptAction instance that provides the openCustomDialog and closeCustomDialog methods, which are used to open and close custom dialogs, respectively:

• openCustomDialog – Opens a custom dialog that supports customizable styles, such as width, height, background color, and shadow.
• closeCustomDialog – Closes the custom dialog.

Troubleshooting Process

Reproduce the Issue

• Open multiple custom dialogs using openCustomDialog and attempt to close them individually.
• Verify that the correct dialog closes when the “Close pop-up window” button is clicked.

Analyze the Logic

• The dialogMap stores dialog IDs mapped to their respective dialog numbers.
• When closing a dialog, the corresponding ID is retrieved from dialogMap using the dialog number.
• The issue may arise if the dialogMap is not properly updated or if the dialog ID is incorrect.

Check Dialog ID Assignment

• Ensure openCustomDialog returns a valid dialogId and is correctly stored in dialogMap.
• Verify that the dialogNum is unique for each dialog and matches the key in dialogMap.

Validate Close Operation

• Confirm that closeCustomDialog is called with the correct dialogId retrieved from dialogMap.
• Check for potential errors in the try‑catch block during closure.

Analysis Conclusion

The issue stems from improper handling of dialog IDs in dialogMap, leading to incorrect or missing IDs during closure. By ensuring accurate storage and retrieval of dialog IDs and adding error checks, the dialogs can be closed correctly.

Solution

openCustomDialog returns a dialogId in its promise callback. This ID uniquely identifies the opened pop‑up, allowing you to store it in a data structure such as a Map (or HashMap) and later retrieve it for closing the specific dialog.

Return type of promptAction.openCustomDialog

• Promise – resolves with the dialog ID for use by closeCustomDialog.

Code Example

import { BusinessError } from '@kit.BasicServicesKit';
import { HashMap } from '@kit.ArkTS';

@Entry
@Component
struct CustomDialogDemo {
  @State dialogNum: number = 0;
  ctx: UIContext = this.getUIContext();
  dialogMap: HashMap = new HashMap();

  @Builder
  customDialogComponent(dialogNumber: number) {
    Column() {
      Text('Pop-up window' + dialogNumber).fontSize(14);
      Row({ space: 25 }) {
        Button('Close pop-up window').onClick(() => {
          try {
            // Locate the corresponding pop‑up window ID and close it.
            this.ctx.getPromptAction()
                .closeCustomDialog(this.dialogMap.get(dialogNumber));
          } catch (error) {
            const { message, code } = error as BusinessError;
            console.error(`closeCustomDialog error code is ${code}, message is ${message}`);
          }
        });
      }
    }
    .height('70%')
    .padding(5)
    .width('70%')
    .backgroundColor(Color.Pink)
    .margin({ left: dialogNumber * 10 });
  }

  build() {
    Column({ space: 20 }) {
      Text('Click to open the pop-up window')
        .fontSize(14)
        .onClick(() => {
          this.dialogNum += 1;
          this.ctx.getPromptAction()
            .openCustomDialog({
              builder: () => {
                this.customDialogComponent(this.dialogNum);
              },
              isModal: false
            })
            .then((dialogId: number) => {
              // Store the dialog ID for later closure.
              try {
                this.dialogMap.set(this.dialogNum, dialogId);
              } catch (error) {
                console.error(`error: ${error}`);
              }
            })
            .catch((error: BusinessError) => {
              console.error(`openCustomDialog error code is ${error.code}, message is ${error.message}`);
            });
        });
    }
    .width('100%')
    .padding(30);
  }
}

Verification Result

Original article: How Do I Close a Specified Pop-up Window When OpenCustomDialog Is Used?