[OpenNMS/opennms] f5b727: NMS-20160: Add a clear button to OnmsSearchInput a...

  Branch: refs/heads/jira/NMS-20160-search-input-etc
  Home:   https://github.com/OpenNMS/opennms
  Commit: f5b7278c2c46a63f6e824f25823360415b177314
      https://github.com/OpenNMS/opennms/commit/f5b7278c2c46a63f6e824f25823360415b177314
  Author: Scott Theleman <[email protected]>
  Date:   2026-08-18 (Tue, 18 Aug 2026)

  Changed paths:
    M ui/packages/onms-ui/README.md
    M ui/packages/onms-ui/src/components/OnmsSearchInput.vue
    M ui/src/components/Device/DCBSearch.vue
    M ui/src/components/EventConfiguration/EventConfigSourceTable.vue
    M ui/src/components/FileEditor/Search.vue
    M ui/src/components/Menu/Menubar.vue
    M ui/src/components/Menu/Search.vue
    M ui/src/components/Nodes/NodesTable.vue
    M ui/src/components/SCV/ScvSearchDrawer.vue
    M ui/src/components/SnmpConfiguration/SnmpConfigDefinitionsTable.vue
    M ui/src/components/SnmpConfiguration/SnmpConfigProfilesTable.vue
    A ui/tests/components/Menu/Menubar.test.ts
    M ui/tests/onms-ui/OnmsSearchInput.test.ts

  Log Message:
  -----------
  NMS-20160: Add a clear button to OnmsSearchInput and move the search icon left

The search field now reads left-to-right as one control: leading search
icon, input, trailing clear button that appears once there is something to
clear. Clicking it emits update:modelValue with '' plus a clear event and
returns focus to the input. The component also exposes focus()/blur().

The clear button is deliberately NOT an InputIcon: InputIcon renders
<span aria-hidden="true"> with the attr hard-coded through mergeProps, so a
focusable button inside it would sit in an aria-hidden subtree. It is an own
absolutely-positioned <button aria-label="Clear search"> instead. Its wrapper
stays mounted while the field is empty because PrimeVue sizes the input's
trailing padding off DOM position, not content, so the text would otherwise
reflow on the first keystroke.

Two seam-level fixes fold in:

- IconField anchors its icons to the *field's* edges, and PrimeVue leaves
  filling the field to the caller — so the icons drift away from a
  narrower input. Six call sites had each hand-patched this with the same
  two rules and a comment about the icon "floating far out in the
  container"; the component now owns them and all seven copies are gone,
  along with the padding-right overrides IconField supplies itself.

- opennms-styles.scss (menu bundle only) carries an unlayered legacy
  override, `input, label, li, select, span, … { color: inherit }`.
  Unlayered author styles beat any @layer, and PrimeVue ships its CSS in
  @layer primevue, so the field's text and its .p-inputicon glyph
  inherited the surrounding surface colour — white-on-white on the dark
  menubar in light mode. The component re-asserts the theme's own tokens.

The Menubar search drops its hand-rolled input, absolute search icon and
results-toolbar close button in favour of the shared component. The toolbar
close existed only because click-outside dismissal wasn't working, so that
is wired up properly via the vendored useOutsideClick; its window-blur leg
is what makes it work on the legacy pages, where a click inside a JSP
iframe never reaches the menu's document. Escape still closes and keeps the
query, and keys aimed at the clear button are no longer hijacked by the
result-navigation handler.

The shift-shift focus shortcut reached into the search markup with
querySelector('.onms-search-input-wrapper input.search-input'), which this
change would have broken; Search now exposes focus() and Menubar calls it
through a template ref.

Also fixes a pre-existing Menubar bug found on the way: useOutsideClick was
called with `outsideClick.value` (undefined at setup — the composable reads
.value when the click arrives) and its returned `active` ref was never set,
so the listener had never run. Covered by a new regression test.


  Commit: 65d073ce714069e13e846a4fca87f9a382f43b1a
      https://github.com/OpenNMS/opennms/commit/65d073ce714069e13e846a4fca87f9a382f43b1a
  Author: Scott Theleman <[email protected]>
  Date:   2026-08-18 (Tue, 18 Aug 2026)

  Changed paths:
    M ui/packages/onms-ui/README.md
    M ui/packages/onms-ui/src/components/OnmsAutoComplete.vue
    M ui/src/components/Map/MapSearch.vue
    A ui/tests/components/Map/MapSearch.test.ts
    M ui/tests/onms-ui/OnmsAutoComplete.test.ts

  Log Message:
  -----------
  NMS-20160: Give the map search a seam search icon and a clear control

MapSearch drew its magnifier with a PrimeIcons font glyph (`i.pi.pi-search`),
the last search icon in the app not coming from the seam's icon set. It now
uses OnmsIcon with action/Search.vue — the same icon OnmsSearchInput renders —
and gains a trailing navigation/Cancel.vue icon that clears the field.

Clearing resets everything a search leaves behind: the pending debounce, the
selected chips, the map's node filter, the "Searching…"/"No results" label,
and the text typed but not yet selected. It also resets mapStore's
nodeSearchTerm — MapNodesGrid sets that to drive a search from outside and
MapSearch reacts to it in a watchEffect, so a stale term would stop a repeat
click on that same node from re-running the search.

That last part needed a seam addition: in `multiple` mode PrimeVue's inner
input is uncontrolled (it binds `value` only in single mode), so the typed
query lives in the DOM with no model to reset and a caller cannot reach it
through modelValue. Clicking the clear icon would have dropped the chips and
left the text behind. OnmsAutoComplete now exposes clearInput() (and focus(),
mirroring OnmsSearchInput) so that knowledge stays inside the package rather
than becoming a .p-* DOM query in app code.

The icon stays visible whether or not there is anything to clear: unlike
OnmsSearchInput's button, which sits inside the input, this one is a sibling
in the floating map panel, so hiding it would resize the panel on every
selection.


Compare: https://github.com/OpenNMS/opennms/compare/f5b7278c2c46%5E...65d073ce7140

To unsubscribe from these emails, change your notification settings at https://github.com/OpenNMS/opennms/settings/notifications


_______________________________________________
Please read the OpenNMS Mailing List FAQ:
http://www.opennms.org/wiki/index.php?page=MailingListFaq
opennms-cvs mailing list

To *unsubscribe* or change your subscription options, see the bottom of this page:
https://lists.sourceforge.net/lists/listinfo/opennms-cvs