Why Your Lightning Modal Won't Close

Your modal opens fine. But when users click Cancel or the X button, nothing happens. The modal stays open. Here's why this happens and how to fix it.

The Problem

I built a Lightning Web Component modal. It worked during testing. But in production, users couldn't close it. The console showed my handleCancel() method ran. The this.close() call worked without errors. But the modal stayed open.

Finding the Real Error

I stripped the component down to basics. Then I got this error:

TypeError: Cannot set property parentNode of #<Node> which has only a getter

This pointed to the real problem. I had named a property parentNode:

// This breaks the modal
export default class MyModal extends LightningModal {
    @api parentNode = null;
}

But parentNode is a built-in DOM property. It's read-only. When Lightning tries to build the modal, it hits this conflict and fails.

The Fix

Rename the property:

// This works
export default class MyModal extends LightningModal {
    @api parentNodeData = null;
}

Then update everywhere you use it:

// In your getters
get isChildNode() {
    return this.parentNodeData !== null;
}

// In your modal calls
const result = await MyModal.open({
    parentNodeData: this.parentNode, // Changed from parentNode
});

Property Names to Avoid

Never use these as @api property names:

Node properties:

• parentNode
• childNodes
• firstChild
• lastChild
• nextSibling
• previousSibling

Element properties:

• children
• className
• id
• innerHTML

Event properties:

• onclick
• onload
• onerror

Instead of generic names, be specific:

// Good
@api selectedNodeData = null;
@api parentStepInfo = null;
@api modalConfig = null;

// Bad - might conflict
@api parent = null;
@api node = null;
@api element = null;

How to Debug This

If your modal won't close:

1. Make a simple test modal with just basic properties
2. Check your property names against the avoid list
3. Look for DOM-related errors in the console
4. Add logging to see where it fails

handleCancel() {
    console.log('Cancel clicked');
    this.close();
}

Lightning modals do a lot behind the scenes:

• Create DOM elements
• Move them around the page
• Handle focus and accessibility
• Clean up when closed

When your property names clash with built-in DOM properties, this process breaks. Framework code and your code share the same space. Pick property names that won't conflict. Next time your modal won't close, check your property names first. It might save you hours of debugging.