Skip to content

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

Open
plamenivanov91 wants to merge 1 commit into
mainfrom
sb-click-event
Open

fix(ui5-shellbar): fix search-button-click event and getSearchButtonDomRef with ui5-shellbar-search#13843
plamenivanov91 wants to merge 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
@plamenivanov91
plamenivanov91 deployed to netlify-preview July 17, 2026 16:40 — with GitHub Actions Active
@sap-ui5-webcomponents-release

Copy link
Copy Markdown

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant