AI Misses the Mark: Cascader Expands 40→420 Lines in Micro‑Frontend – 5 Popup Pitfalls & Full‑Screen Fix

Background

Last Wednesday a bug appeared: clicking a multi‑category filter yielded no response. The API returned data, but the popup layer of the Ant Design Vue Cascader was mis‑positioned, sized incorrectly, and its lifecycle failed.

Actual Problem

In a micro-app sub‑application the Cascader popup exhibited several "broken component" symptoms. The root causes differed from the initial assumptions:

Observed: Click does nothing → Assumed: No API data → Real: Popup top is negative, flying off‑screen.

Observed: Popup height only 32 px → Assumed: Styles not loaded → Real: rc-trigger wrapper has height: 0 and overflow: hidden, clipping content.

Observed: First level expands, second does not → Assumed: Async data bug → Real: fixPopupLayout locked maxWidth, new column cut off.

Observed: Column width / arrow misaligned → Assumed: CSS specificity → Real: All columns were hard‑coded to width: 200px, inner and outer layers mismatched.

Observed: Popup floats after page scroll → Assumed: Missing close logic → Real: Only window.scroll was listened to, missing the actual scrolling container .layout-content.

Why Cascader?

A comparison shows why Cascader is harder than Select or DatePicker in a micro‑frontend:

Popup structure: Select uses a single panel; Cascader uses multiple flex columns that are inserted asynchronously.

Width demand: Select matches input width; Cascader needs three layers (≈200 px + 300 px + 200 px = 700 px).

Interaction complexity: Select opens → pick one; Cascader expands level by level, recalculating each time.

rc‑trigger impact: Select’s wrapper has minor effect; Cascader’s wrapper forces height: 0, reducing the popup to a 32 px strip.

Thus Cascader is an order of magnitude more difficult to adapt.

Investigation Stages (Five Phases)

Phase ① Click no response: Suspected API or event interception; actually the popup DOM existed with top ≈ -665px, placing it off‑screen.

Phase ② Height 32 px: Suspected missing styles; actually rc-trigger wrapper had height: 0 and overflow: hidden, clipping the content.

Phase ③ Third‑level delay: Suspected async data bug; actually fixPopupLayout locked maxWidth, cutting off the new column.

Phase ④ Column/arrow misalignment: Suspected CSS priority; actually all columns were hard‑coded to width: 200px, causing inner‑outer mismatch.

Phase ⑤ Popup floats after scroll: Suspected missing close logic; actually only window.scroll was listened to, missing the real scrolling ancestor .layout-content.

All issues stem from popup DOM mounting, positioning, sizing, and lifecycle within the micro‑frontend.

Root‑Cause Layers

Layer 1 – Micro‑frontend coordinate system

micro-app

injects an isolated environment. rc-trigger uses getBoundingClientRect() to compute position. If the popup is mounted to an inner element (e.g., inside micro-app) the reference frame differs from fixed positioning, producing a negative top. Global getPopupContainer forces all popups to share this wrong reference, so it must be reverted.

Layer 2 – rc‑trigger hidden wrapper

Ant Design Vue Cascader wraps the popup with an invisible DOM layer:

<!-- Expected structure -->
<div class="ant-cascader-dropdown">...</div>

<!-- Actual structure -->
<div style="position:absolute; top:0; left:0; width:100%; height:0">
  <!-- height:0 is the culprit -->
  <div class="ant-cascader-dropdown">...</div>
</div>

The wrapper’s height: 0 plus overflow: hidden reduces the popup to a thin 32 px strip.

Fix: implement unwrapTriggerAncestors() to set height to auto and overflow to visible.

Layer 3 – Custom regressions introduced during adaptation

Self‑made pitfall</th>

Trigger</th>

Fix</th> minHeight: 32px hard‑coded</td>

Opening shows wrong height</td>

Set menu area to fixed 360 px</td> maxWidth locked</td>

New column invisible on expand</td>

Replace with minWidth + MutationObserver to recalc</td>

All columns width: 200px Second layer too narrow</td>

Set width dynamically per column index</td>

Only listening to window.scroll Main content scroll doesn’t close popup</td>

Collect all ancestors with overflow: auto and listen to them</td>

Each fix introduced new code, inflating the component from ~40 lines to ~420 lines.

Final Solution – Custom Full‑Screen Mount Container

After many attempts the effective approach is to create a local full‑screen container inside the component, leaving global configuration untouched.

document.body
  └── .popup-container (fixed full‑screen, pointer-events: none)
        └── .ant-cascader-dropdown (fixed, positioned manually via JS)
              └── .ant-cascader-menus (flex, height 360px)
                    ├── [Column 1: 200px]
                    ├── [Column 2: 300px]
                    └── [Column 3: 200px]

// Core helper functions
function ensurePopupContainer(): HTMLElement {
  let container = document.querySelector('.my-popup-container');
  if (!container) {
    container = document.createElement('div');
    container.className = 'my-popup-container';
    Object.assign(container.style, {
      position: 'fixed',
      top: 0,
      left: 0,
      width: '100vw',
      height: '100vh',
      pointerEvents: 'none',
      zIndex: 1050,
    });
    document.body.appendChild(container);
  }
  return container;
}

The solution provides four mechanisms: ensurePopupContainer() – creates a dedicated body‑level mount point to avoid the micro‑frontend’s wrong reference frame. fixPopupLayout() – recalculates position and column widths after each expansion. unwrapTriggerAncestors() – removes the height: 0 wrapper. MutationObserver – watches for newly inserted columns and recomputes their widths.

5 Things Not to Do

Do not set getPopupContainer globally via ConfigProvider – it miscalculates top for all popups.

Do not use trigger.parentElement as the mount point – parent containers often have overflow: hidden, clipping the popup.

Do not give every Cascader column the same width – deeper levels may need more space (e.g., 300 px for long names).

Do not hard‑code maxWidth without listening to column changes – new columns will be invisible.

Do not listen only to window.scroll – many apps scroll inside a container like .layout-content.

Checklist for Other Micro‑Frontend Popup Components

Popup component abnormal in micro‑frontend
  ├── 1. Ensure styles are imported inside the sub‑app
  ├── 2. Avoid global <code>getPopupContainer</code>; prefer default <code>body</code>
  ├── 3. Open DevTools – does the popup DOM exist? Is <code>getBoundingClientRect()</code> reasonable?
  ├── 4. Check rc‑trigger wrapper for <code>height: 0</code>
  ├── 5. If custom mount needed, use a fixed full‑screen container + JS positioning
  └── 6. Close on page scroll – collect real scroll ancestors, not just <code>window</code>

In summary, the Cascader’s explosion to 420 lines is a workaround for popup positioning bugs in a micro‑frontend context. When upstream libraries fix these issues, the extra code can be removed.