Navigation borders are huge and confusing

[davidchisnall]

When keyboard navigation is enabled, the borders around the selected control are drawn two characters wide, with one character of space between them and the selected control. This is huge in general and in things like combo boxes is incredibly confusing.

This can be fixed by patching ImGui::RenderNavHighlight method to disable both of the if (flags & ... blocks. It would be nice if the back end had some mechanism for telling Dear ImGui not to render these borders.

[ggerganov]

Thanks for reporting this!

I agree that it looks like we need to patch the ImGui:RenderNavHighlight method.
Would you prefer to the highlight to be disabled completely, or change it to something more text-friendly?
Maybe just reduce the margin of the highlight rectangle?

[ggerganov]

An alternative solution is to add the following at the start of the frame:

ImGui::PushStyleColor(ImGuiCol_NavHighlight, ImVec4 { 0.0f, 0.0f, 0.0f, 0.0f });

and this at the end of the frame:

ImGui::PopStyleColor();

This makes the navigation highlight transparent.
I just did a brief test and I think it looks OK.

[davidchisnall]

I would like a visual clue that things are the current ones for input. Some of the visual elements have their own behaviour (e.g. combo boxes and checkboxes) but others (such as text fields and sliders) don't. With your change.

I've been playing a bit with this diff (as a quick-and-dirty hack):

diff --git a/imgui.cpp b/imgui.cpp
index c3f7d376..e1a7637e 100644
--- a/imgui.cpp
+++ b/imgui.cpp
@@ -2833,6 +2833,12 @@ void ImGui::RenderNavHighlight(const ImRect& bb, ImGuiID id, ImGuiNavHighlightFl
 
     float rounding = (flags & ImGuiNavHighlightFlags_NoRounding) ? 0.0f : g.Style.FrameRounding;
     ImRect display_rect = bb;
+    if (1) {
+        auto min = display_rect.Min;
+        ImVec2 max{min.x+1, min.y+1};
+        window->DrawList->AddRect(min, max, GetColorU32(ImGuiCol_NavHighlight), 0, 0, 0.5f);
+        return;
+    }
     display_rect.ClipWith(window->ClipRect);
     if (flags & ImGuiNavHighlightFlags_TypeDefault)
     {

This isn't quite right, but it draws a single character block next to the highlighted element, which seems to make it fairly easy.

Looking at some existing dialog-based tools, they use a highlight that changes the background colour of the text from grey to blue, which gives a very strong visual indication of the current elements. For example:

Here it's immediately obvious that the Documentation installation option and OK buttons are highlighted. You need to be familiar with the weird behaviour of dialog to understand that the behaviour when you hit enter actually depends on both of these, which is why I'm interested in something a bit more flexible.

I'm not sure if it's my limited understanding of ImTui / Dear ImGui, but when I tried to simply reduce the size of the rectangle I got odd clipping behaviour. In particular, it appears that the highlight is drawn in front of earlier controls but behind later ones, in some cases, which means that you don't have a single consistent shape. This is particularly apparent in lists of checkboxes or in combo box elements.

Inverting the colour of the selected element might be the simplest thing, visually, but I'm not sure how to accomplish it.