Skip to content

fix(ui5-shellbar): fix search-button-click event and getSearchButtonDomRef with ui5-shellbar-search - #13843

Merged
dobrinyonkov merged 1 commit into
mainfrom
sb-click-event
Jul 22, 2026
Merged

dobrinyonkov merged 1 commit into
mainfrom
sb-click-event

Conversation

@plamenivanov91

Copy link
Copy Markdown
Contributor

Both issues stem from the new ui5-shellbar-search path bypassing handleSearchButtonClick entirely ? the controller called setSearchState directly, which toggled the field but never fired the event.

search-button-click not fired (Issue 1)

  • Add handleSearchButtonClick callback to ShellBarSearchConstructorParams and wire it up via getSearchDeps().
  • Route onSearch in the ShellBarSearch controller through handleSearchButtonClick() instead of calling setSearchState directly, so the event fires consistently and preventDefault() is respected.
  • Resolve the targetRef in handleSearchButtonClick from the ui5-shellbar-search shadow root (.ui5-shell-search-field-button) when isSelfCollapsibleSearch, so event.detail.targetRef is never null.

getSearchButtonDomRef returns null (Issue 2)

  • Add getSearchButtonDomRef() to ShellBarSearch (the custom element), querying .ui5-shell-search-field-button from its own shadow root.
  • Delegate from ShellBar.getSearchButtonDomRef() to the component method when isSelfCollapsibleSearch; legacy data-ui5-stable path is unchanged. Returns null when the search is expanded (button not in DOM) ? correct.

Tests (ShellBar.cy.tsx)

  • fires search-button-click with non-null targetRef when ui5-shellbar-search is used.
  • getSearchButtonDomRef returns the toggle button when collapsed.

Sample (ShellBar.html)

  • Added a ui5-shellbar-search section with live event output and a button to call getSearchButtonDomRef() and display the result.

SNOW: DINC0975247
SNOW: DINC0975256

…omRef with ui5-shellbar-search

Both issues stem from the new ui5-shellbar-search path bypassing
handleSearchButtonClick entirely ? the controller called setSearchState
directly, which toggled the field but never fired the event.

search-button-click not fired (Issue 1)
- Add handleSearchButtonClick callback to ShellBarSearchConstructorParams
  and wire it up via getSearchDeps().
- Route onSearch in the ShellBarSearch controller through
  handleSearchButtonClick() instead of calling setSearchState directly,
  so the event fires consistently and preventDefault() is respected.
- Resolve the targetRef in handleSearchButtonClick from the
  ui5-shellbar-search shadow root (.ui5-shell-search-field-button) when
  isSelfCollapsibleSearch, so event.detail.targetRef is never null.

getSearchButtonDomRef returns null (Issue 2)
- Add getSearchButtonDomRef() to ShellBarSearch (the custom element),
  querying .ui5-shell-search-field-button from its own shadow root.
- Delegate from ShellBar.getSearchButtonDomRef() to the component method
  when isSelfCollapsibleSearch; legacy data-ui5-stable path is unchanged.
  Returns null when the search is expanded (button not in DOM) ? correct.

Tests (ShellBar.cy.tsx)
- fires search-button-click with non-null targetRef when
  ui5-shellbar-search is used.
- getSearchButtonDomRef returns the toggle button when collapsed.

Sample (ShellBar.html)
- Added a ui5-shellbar-search section with live event output and a button
  to call getSearchButtonDomRef() and display the result.

SNOW: DINC0975247
SNOW: DINC0975256
@sap-ui5-webcomponents-release

Copy link
Copy Markdown

@dobrinyonkov
dobrinyonkov merged commit 95c0af8 into main Jul 22, 2026
13 checks passed
@dobrinyonkov
dobrinyonkov deleted the sb-click-event branch July 22, 2026 08:15
@sap-ui5-webcomponents-release

Copy link
Copy Markdown

🧹 Preview deployment cleaned up: https://pr-13843--ui5-webcomponents.netlify.app

@sap-ui5-webcomponents-release

Copy link
Copy Markdown

🎉 This PR is included in version v2.25.0 🎉

The release is available on v2.25.0

Your semantic-release bot 📦🚀

openui5bot pushed a commit to UI5/openui5 that referenced this pull request Jul 29, 2026
Adresses the folllowing issues:

DINC0942674 - UI5/webcomponents#13834

ShellBarSearch's empty-Enter handler collapses the field directly
without firing ui5-search, leaving ShellBar's showSearchField out of
sync—fixed by firing the event before collapsing, with a new
ShellBar.cy.tsx test verifying both stay in sync.

DINC0975247, DINC0804370 -
UI5/webcomponents#13843

The new ui5-shellbar-search path bypassed handleSearchButtonClick, so
route onSearch through it (resolving targetRef from the shadow root) and
add getSearchButtonDomRef() to the custom element with ShellBar
delegating to it—verified by ShellBar.cy.tsx tests and a live sample in
ShellBar.html.

Change-Id: I242e66270d99f3f02adb622c11fe5081304d9ab6
SNOW: DINC0942674 DINC0975247 DINC0804370
openui5bot pushed a commit to UI5/openui5 that referenced this pull request Jul 29, 2026
Adresses the folllowing issues:

DINC0942674 - UI5/webcomponents#13834

ShellBarSearch's empty-Enter handler collapses the field directly
without firing ui5-search, leaving ShellBar's showSearchField out of
sync—fixed by firing the event before collapsing, with a new
ShellBar.cy.tsx test verifying both stay in sync.

DINC0975247, DINC0804370 -
UI5/webcomponents#13843

The new ui5-shellbar-search path bypassed handleSearchButtonClick, so
route onSearch through it (resolving targetRef from the shadow root) and
add getSearchButtonDomRef() to the custom element with ShellBar
delegating to it—verified by ShellBar.cy.tsx tests and a live sample in
ShellBar.html.

Change-Id: I2f46e15ae20ff6c85414f37836817ac227f505ba
CR-Id: 002075125800003232132026
SNOW: DINC0942674
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants