hashicorp / hashicorp/consul

KV Editor Search does not find matches outside the visible viewport when "Code" mode is enabled (Consul UI 2.0.0)

Open
#23,638 0 comments 0 reactions 0 assignees View on GitHub
Dominant language
Go
Stars
30.1k
Forks
4.6k
Avg merge
1d 18h
Merged PRs (30d)
39

Description

Description
Environment
Consul UI Version: 2.0.0

When browsing a large KV entry in the Consul UI, the search functionality inside the JSON viewer does not find existing text if the matching content is outside the currently rendered/visible area.

The search only starts returning matches after manually scrolling down until the target text becomes visible.

Steps to Reproduce
Open a large KV entry containing a large JSON document (for example Ansible facts cache).
Enable Code mode.
Open the browser search (Ctrl+F).
Search for a string that exists in the JSON but is located further down in the document (outside the currently visible section).
Observe that no result is found.
Scroll down the JSON document.
Repeat the search.
Expected Behavior

The search should find all matching text in the JSON document regardless of whether the content is currently visible on screen.

Actual Behavior

The search only finds matches that have already been rendered in the visible portion of the document.

After scrolling down and causing additional content to be rendered, the search starts finding matches.

Additional Information

If the Code option is disabled, browser search works correctly and finds matches anywhere in the content.

This suggests that the Code view may be using virtualization/lazy rendering, causing browser search (Ctrl+F) to only operate on the DOM elements currently rendered in the viewport.

Search for dm-5
Result: 0/0
String exists in the document but is not currently visible.

After scrolling further down
Search for dm-5
Result: 1/2
The same string is now found because the corresponding section has been rendered.
Possible Root Cause

The Code editor appears to virtualize the document and only render visible lines. Browser native search (Ctrl+F) can therefore only search rendered DOM content instead of the full document.

tank you

Contributor guide

Open the contributing guide

Research direction

Reproduce this in Consul UI 2.0.0 with a large JSON KV entry, enable Code mode, and search for text outside the visible viewport. Compare browser search behavior before and after scrolling. Done means searches find matching text throughout the document without requiring manual scrolling, while the existing non-Code behavior remains correct.

Written by the indexing model from the issue text.

Assessment

Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
55/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.