Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

ShellBar: Magnifier-Button toggles searchField, but doesn't trigger a search #6273

Open
MetalCar opened this issue Jan 13, 2023 · 6 comments

Comments

@MetalCar
Copy link

Issue Description

Is it right, that that magnifier button only toggles the searchField? Is it possible to change this behaviour, that when something is entered in the searchfield that the search will be triggered?

SAP/ui5-webcomponents-react#3982

@kineticjs
Copy link
Contributor

Hi @MetalCar,

You know that by design the app provides the ui5-input component to be used for the search (i.e. sets it to the "searchField" slot of the ShellBar)
So the app can already use the existing ui5-input API to add a listener for the inputs change/input events => can trigger a search when something is entered in the searchfield.
Or did you mean something else?

@kineticjs kineticjs self-assigned this Jan 13, 2023
@MetalCar
Copy link
Author

We are using the React-Components of UI5. I already opened an issue there, but they refer me to this repository. I have a ShellBar on top of my application. The ShellBar offers a property called searchField. I can assign an Input to this searchField, so that input will be rendered in the ShellBar, but with an additional IconButton with a magnifier on it. When i click on this magnifier icon button, then the only behaviour of this button is, to toggle that input, that i entered into the searchField-property. In the following, my example Code of our ShellBar (but it's react)

<ShellBar
	searchField={
	  <>
		  <Input
			ref={searchField}
			showClearIcon={true}
			onKeyUp={handleChange}
		  />
	  </>
	}
  >

And I also attached an image to describe what i mean.
All what I want is, to change the behavoiur of that magnifier button, but it comes automatically through the searchField-Property.
image

@kineticjs
Copy link
Contributor

Hi @MetalCar,

So you want the app to be notified whenever the user clicks the "magnifier" button in order to do some additional/different action,
for example, prevent the hiding of the search field and instead trigger a search for the entered term?

@kineticjs kineticjs removed their assignment Jan 16, 2023
@MetalCar
Copy link
Author

That's exactly what I want todo!

@ndeshev ndeshev self-assigned this Jan 16, 2023
@ndeshev
Copy link
Contributor

ndeshev commented Jan 16, 2023

Hello @SAP/ui5-webcomponents-topic-p, could you please take a look of this feature request to provide an event for search icon click similar to the one that the profile icon has.

@dobrinyonkov
Copy link
Contributor

Internal reference: BGSOFUIPIRIN-6076

@dobrinyonkov dobrinyonkov moved this from New to Approved in Planning - Topic P Feb 20, 2023
@dobrinyonkov dobrinyonkov self-assigned this Feb 20, 2023
@dobrinyonkov dobrinyonkov moved this from Approved to In Progress in Planning - Topic P Jan 26, 2024
@dobrinyonkov dobrinyonkov added this to the 1.22.0 milestone Jan 26, 2024
yanaminkova added a commit that referenced this issue Feb 1, 2024
New event search-button-click is added, which allows different actions to be triggered
when it is fired on the search button inside the ui5-shellbar.
If its preventDefault method is called, the default action of the search button
(expanding/collapsing the input) won`t be triggered, but let the users trigger their own.

Related: #6273
tsanislavgatev pushed a commit that referenced this issue Feb 20, 2024
New event search-button-click is added, which allows different actions to be triggered
when it is fired on the search button inside the ui5-shellbar.
If its preventDefault method is called, the default action of the search button
(expanding/collapsing the input) won`t be triggered, but let the users trigger their own.

Related: #6273
@dobrinyonkov dobrinyonkov moved this from In Progress to Completed in Planning - Topic P Mar 6, 2024
@ilhan007 ilhan007 modified the milestones: 1.22.0, 1.24.0 Mar 22, 2024
@ilhan007 ilhan007 modified the milestones: 1.24.0, 2.0.0 Jun 8, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
Status: Completed
Development

No branches or pull requests

5 participants