ui5-search-item: Clickable area has dead zones — click only registers in vertically centered text region

[mydavidzhang]

Bug Description

In ui5-search-item (used in ShellBar global search suggestions), the list item appears fully clickable but the click action only triggers when clicking on or very near the text label, or on the far right of the row. Clicking slightly above or below the centered text does nothing, creating "dead zones" within the visually highlighted row.

Root Cause (from DOM inspection):

The inner li[part="native-li"] has align-items: center and height: 100%, but the actual clickable/interactive target (ui5-search-item-content or similar) does not stretch to fill the full row height. The click area is constrained to the content height rather than the full list item height.

Affected Component

SearchItem

Expected Behaviour

The entire highlighted row area should be clickable.

Isolated Example

https://ui5.github.io/webcomponents/components/fiori/SearchItem/

Steps to Reproduce

Steps to Reproduce:

1. Open ShellBar with a search field
2. Type a query (e.g. "manage")
3. Hover over a suggestion row — the full row highlights
4. Click in the top or bottom portion of the row (above/below the text) → no action
5. Click directly on the text or far right → action triggers correctly

Expected: The entire highlighted row area should be clickable.

Log Output, Stack Trace or Screenshots

Priority

High

UI5 Web Components Version

2.25.0

Browser

Chrome

Operating System

No response

Additional Context

No response

Organization

SAP SuccessFactors

Declaration

• I’m not disclosing any internal or sensitive information.

[hinzzx]

Hey @UI5/ui5-team-ctr-ril ,

The reporter says that clicking the top or bottom portion of a ui5-search-item row in ShellBar search suggestions does nothing. Only the vertically-centered text band (and far right) registers clicks, leaving "dead zones" in the highlighted row.

I checked and the click handler sits on the inner <li>, but the visible highlight is the host box, which adds vertical padding that lives outside the <li>. So those padding strips paint the hover background but pointer events land on :host, which has no click handler, which is exactly the top/bottom dead zones.

Could you please take a look?

Best,
Stoyan