Issue Station
Sign In
Tools hereToolbox

dify - 💡(How to fix) Fix [Bug] External API modal blocked by z-index issue in Knowledge Base [2 comments, 3 participants]

Official PRs (…)
ON THIS PAGE

Recommended Tools

×6

Utilities matched from this issue’s tags and category — try them while you read without losing context.

GitHub issue graph ai analysis

Paste a GitHub issue URL. We fetch that issue, discover linked issues from bodies/comments/timeline, collect linked pull requests, and produce a structured English report.

The report is written in English Markdown for sharing and archival.

Helpful · Quick feedback

Loading…
GitHub stats
langgenius/dify#35473•Fetched 2026-04-22 08:03:58
View on GitHub
Comments
2
Participants
3
Timeline
6
Reactions
1
Author
tankfinaltankfinal
Participants
dosubot[bot]dosubot[bot]lyzno1lyzno1tankfinaltankfinal
Timeline (top)
commented ×2cross-referenced ×1labeled ×1mentioned ×1

Root Cause

The external-api-modal component (web/app/components/datasets/external-api/external-api-modal/index.tsx) still uses the legacy PortalToFollowElem component with z-60:

<PortalToFollowElem open>
  <PortalToFollowElemContent className="z-60 h-full w-full">

According to the overlay migration guide (web/docs/overlay-migration.md):

  • Legacy Modal uses z-60
  • Legacy PortalToFollowElem callers use up to z-1001
  • New UI primitives use z-1002

When other components on the page use higher z-index values (e.g., z-1001), the modal gets occluded.

Code Example

<PortalToFollowElem open>
  <PortalToFollowElemContent className="z-60 h-full w-full">

---

// Before
<PortalToFollowElem open>
  <PortalToFollowElemContent className="z-60">

// After  
<Dialog open onOpenChange={onCancel}>
  <DialogContent>
RAW_BUFFERClick to expand / collapse

Bug Description

The External API configuration modal in the Knowledge Base section is blocked by other UI elements due to incorrect z-index layering. When clicking "Setup OAuth Client" or "Add API Key", the dialog appears behind the current layout, making it impossible to interact with.

Reproduction Steps

  1. Navigate to Knowledge Base → Connect External Knowledge Base
  2. Click "Add New API" button (triggers external-api-modal)
  3. Observe that the modal is rendered but appears behind other UI elements
  4. Unable to interact with the modal controls

Root Cause

The external-api-modal component (web/app/components/datasets/external-api/external-api-modal/index.tsx) still uses the legacy PortalToFollowElem component with z-60:

<PortalToFollowElem open>
  <PortalToFollowElemContent className="z-60 h-full w-full">

According to the overlay migration guide (web/docs/overlay-migration.md):

  • Legacy Modal uses z-60
  • Legacy PortalToFollowElem callers use up to z-1001
  • New UI primitives use z-1002

When other components on the page use higher z-index values (e.g., z-1001), the modal gets occluded.

Expected Behavior

The modal should appear on top of all other UI elements using the new @langgenius/dify-ui/dialog primitive with z-1002.

Current Code Location

File: web/app/components/datasets/external-api/external-api-modal/index.tsx

Deprecated imports:

  • @/app/components/base/portal-to-follow-elem
  • @/app/components/base/tooltip

Should migrate to:

  • @langgenius/dify-ui/dialog (Dialog, DialogContent, DialogCloseButton)
  • @langgenius/dify-ui/tooltip (Tooltip, TooltipTrigger, TooltipContent)

Environment

  • Dify Version: 1.13.3
  • Browser: [Any modern browser]
  • Deployment: Docker / Self-hosted

Related

This is part of the broader overlay migration tracked in #32767. The external-api-modal is one of the remaining components in the datasets category (11 total) that needs migration from PortalToFollowElem to semantic Base UI primitives.

Suggested Fix

Migrate the component following the pattern used in other migrated dialogs:

// Before
<PortalToFollowElem open>
  <PortalToFollowElemContent className="z-60">

// After  
<Dialog open onOpenChange={onCancel}>
  <DialogContent>

This ensures the modal uses z-1002 and properly stacks above all legacy overlays.

extent analysis

TL;DR

Migrate the external-api-modal component to use the new @langgenius/dify-ui/dialog primitive with z-1002 to fix the z-index layering issue.

Guidance

  • Replace the legacy PortalToFollowElem component with the new Dialog component from @langgenius/dify-ui/dialog to ensure proper z-index stacking.
  • Update the className to remove the z-60 class and rely on the default z-index of the new Dialog component.
  • Verify that the modal appears on top of all other UI elements after migration by checking the z-index values in the browser's developer tools.
  • Review the overlay migration guide (web/docs/overlay-migration.md) for additional guidance on migrating other components.

Example

// Before
<PortalToFollowElem open>
  <PortalToFollowElemContent className="z-60 h-full w-full">

// After
<Dialog open onOpenChange={onCancel}>
  <DialogContent>
    {/* modal content */}
  </DialogContent>
</Dialog>

Notes

This fix assumes that the @langgenius/dify-ui/dialog package is properly installed and imported in the project. If issues persist, verify that the package version is compatible with the current Dify version (1.13.3).

Recommendation

Apply the suggested fix by migrating the external-api-modal component to use the new @langgenius/dify-ui/dialog primitive, as this will ensure proper z-index layering and resolve the issue.

Vote matrix · Quick signals

Works
Did the solution work? Tap to confirm.
Easy Fix
Was it a quick fix?
Time Saver
Did it save you time?
Blocking
Was it severely blocking?
Common Issue
Are others likely hitting this too?
Flaky / Intermittent
Is it intermittent?
Verified / Reproducible
Can you reproduce it reliably?
Loading…
#api#memory management#API rate limit#retriever error#indexing error

Still need to ship something?

×6

Another batch ranked right after the header list — different links, same matching logic.

Back to top recommendations

TRENDING