[BUG][UI]: Arrow key pagination shortcuts always target the first pagination control on the page

[marekdano]

🐞 Bug Summary

The keyboard navigation shortcuts for pagination (← / → arrow keys) always target the first pagination control found in the DOM, regardless of which tab or section the user is currently viewing.

This happens because the keydown handler in admin.js uses document.querySelector(), which returns the first matching element in DOM order:

  const prevBtn = document.querySelector('[\\@click="prevPage()"]');
  const nextBtn = document.querySelector('[\\@click="nextPage()"]');

If the page has multiple pagination controls (e.g. MCP Gateways, Virtual Servers, Tools), pressing → will always paginate the first section (e.g. MCP Gateways) even if the user is viewing the Tools tab.

---

🧩 Affected Component

Select the area of the project impacted:

• mcpgateway - API
• mcpgateway - UI (admin panel)
• mcpgateway.wrapper - stdio wrapper
• Federation or Transports
• CLI, Makefiles, or shell scripts
• Container setup (Docker/Podman/Compose)
• Other (explain below)

---

🔁 Steps to Reproduce

1. Open the Admin UI
2. Navigate to a tab that is not the first one (e.g. Tools)
3. Press → arrow key to go to the next page
4. Observe that the first tab's table Gateways/Virtual Servers paginates, but no action is taken on the Tools table

Note: Also pressing on → arrow key, we go from page 1 to the last one.

🤔 Expected Behavior

Arrow key shortcuts should paginate the table in the currently active/visible tab.

Suggested Fix

Scope the querySelector call to the currently active tab panel instead of the entire document. For example:

  document.addEventListener("keydown", (e) => {
      if (e.target.tagName === "INPUT" || e.target.tagName === "TEXTAREA") return;

      // Find the currently visible tab panel
      const activePanel = document.querySelector('.tab-panel:not([hidden]), .tab-panel.active');
      const scope = activePanel || document;

      if (e.key === "ArrowLeft") {
          e.preventDefault();
          const prevBtn = scope.querySelector('[\\@click="prevPage()"]');
          if (prevBtn && !prevBtn.disabled) prevBtn.click();
      } else if (e.key === "ArrowRight") {
          e.preventDefault();
          const nextBtn = scope.querySelector('[\\@click="nextPage()"]');
          if (nextBtn && !nextBtn.disabled) nextBtn.click();
      }
  });

The exact selector for the active panel (.tab-panel:not([hidden]), .tab-panel.active, [role="tabpanel"]:not([hidden]), etc.) should be adjusted to match the tab panel markup used in the Admin UI templates.

Related

• PR fix(ui): move pagination data into script tag #3006 carried this behavior forward from the original inline <script> in pagination_controls.html
• Issue [BUG][UI]: Alpine.js pagination controls throw console errors on every page load #2975

---

📓 Logs / Error Output

Paste any relevant stack traces or logs here.
⚠️ Do not paste secrets, credentials, or tokens.

---

🧠 Environment Info

You can retrieve most of this from the /version endpoint.

Key	Value
Version or commit	e.g. v0.9.0 or main@a1b2c3d
Runtime	e.g. Python 3.11, Gunicorn
Platform / OS	e.g. Ubuntu 22.04, macOS
Container	e.g. Docker, Podman, none

---

🧩 Additional Context (optional)

Add any configuration details, flags, or related issues.

[gcgoncalves]

this issue is addressed on #3006

Screen.Recording.2026-02-18.at.16.21.19.mov

[crivetimihai]

Thanks @marekdano — confirmed in pagination_controls.html:320-325. The document.querySelector() call always returns the first pagination control in DOM order regardless of active tab. Your suggested fix (scoping to the active tab panel) is the right approach.

Marking as COULD for 1.0.0-GA — it's a UX papercut rather than a functional break, since mouse-based pagination still works correctly.

[marekdano]

this issue is addressed on #3006

Screen.Recording.2026-02-18.at.16.21.19.mov

I tested this issue and can confirm that it is fixed at #3006.