Detail sidebar collapse drops keyboard focus

Open Beginner friendly
#45,934 2 comments 1 reaction 0 assignees View on GitHub

Maintainers usually reply within 1 day

@GYJ99 is already working on this.

Since Nov 9, 2026.

Assessment

Difficulty
2/5
Estimated time
1-3 hours
Newbie friendliness
78/100
Issue type
Bug
Clarity
Clearly specified
Activity status
Active
Tech stack
next.js, react, typescript

Research direction

Read the two top bar components and their Browser Mode specs: web/app/components/app-sidebar/app-detail-top.tsx, dataset-detail-top.tsx, and the corresponding tests under __tests__. Run the keyboard journeys to confirm focus is lost after collapse. Done when both tests pass and focus stays on or moves to the replacement expand button.

Written by the indexing model from the issue text.

Description

project#dify

Affected code

  • web/app/components/app-sidebar/app-detail-top.tsx:30-44,103-111
  • web/app/components/app-sidebar/dataset-detail-top.tsx:28-42,104-112
  • web/app/components/app-sidebar/__tests__/app-detail-top.browser.spec.tsx:57-69
  • web/app/components/app-sidebar/__tests__/dataset-detail-top.browser.spec.tsx:53-65

Reproduction

  1. Open an app or dataset detail page.
  2. Focus the expanded sidebar collapse button with the keyboard.
  3. Press Enter to collapse the sidebar.
  4. Try to press Enter again to expand it.

Expected

Focus remains on, or is transferred to, the replacement expand button so the keyboard journey can continue immediately.

Actual

The focused collapse button is conditionally removed, focus falls back to document.body, and Enter cannot reopen the sidebar until the user navigates back to the new button.

How the tests exposed it

The Browser Mode cleanup added matching it.fails keyboard journeys in the app and dataset top-bar specs. Both activate the real controlled owner and assert focus moves to the replacement expand control; both currently fail because focus is lost.

Cleanup PR: https://github.com/langgenius/dify/pull/45932

Dominant language
Python
Stars
160k
Forks
25.4k
Avg merge
1d 1h
Merged PRs (30d)
608

Getting set up

Open in Codespaces

Starts the project's dev container in your browser, under your own GitHub account.

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from langgenius/dify

All issues in langgenius/dify

Similar issues

More Python issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.