ui5-shellbar/ui5-input support instructional popover

[codefactor]

Is your feature request related to a problem? Please describe.
The current UI5 search on successfactors headers supports instructional popover, this would be nice to have a solution in WCHeader.

Describe the solution you'd like
Some kind of slot for an instructional text to be displayed before the user starts typing anything.

Describe alternatives you've considered
None yet.

Additional context
Add any other context or screenshots about the feature request here.

[ilhan007]

Hello @codefactor

The ui5-input has slot called "valueStateMessage", it is a message that is displayed in a popover underneath the input field and you can pass arbitrary content to that slot like the instructions from the image. In addition, you have to set value-state="Information", because the "valueStateMessage" shows whenever the ui5-input has value-state "Error", "Warning" or "Information".

<ui5-input value-state="Information"  slot="searchField" show-suggestions>
		<div slot="valueStateMessage">Instructions go here</div>
</ui5-input>

The difference would be the light blue background-color of the popover.
Note: the value state message will remain at the top of the suggestions list, unless you remove the slot.

Perhaps you can give it a try and see if it is an acceptable solution.

Best,
ilhan

[codefactor]

@ilhan007 ,

I tried this - it seems close to a good solution but not quite right. When I press the "Search" button to activate the search input for the first time, the popover does not show up right away. It does show up, though, if I click back onto the input field a second time.

Could that be a bug?

[codefactor]

@ilhan007 ,

Also - another thing is that after the user types something - the message is not being removed. I guess I would need to remove the instructional text if there are any search results currently being displayed.

[codefactor]

@ilhan007 ,

I solved the issue about the instructions showing up after search results are displayed by changing the "value-state" prop of the to "None" when the message is not supposed to show.

For the first issue - if you would like to experiment with my implementation and see the issue - you can try out the following repo:

git clone https://github.wdf.sap.corp/xweb/common-components
git co feature/header
cd common-components/packages/webcomponents
npm i
npm start

1. go to http://localhost:8081/test-resources/pages/index.html
2. click on the search button

Expected:
The instructional text should display

Actual:
The instructional text is not displayed at first, you can click somewhere else then click back into the input and the instructional text is displayed.

NOTE: The instructional text snippet is not properly styled yet and the SAP Icon Font is not loaded, please ignore that part

[ilhan007]

Hi @codefactor I cloned the repo and I was able to reproduce it.
It should open the first time exactly as you expect, so there is a bug. Also, I tested the same thing in our test pages and it works fine, the popover opens when I click the search icon.

I think it is a timing issue, related to how and when we focus the input field. Look at the following logic within our code (Shellbar.js)

// ShellBar.js
// The ShellBar uses a timeout to focus the input
// to ensure the input is displayed and ready to be focused
setTimeout(() => {
	const inputSlot = searchField.children[0];

		if (inputSlot) {
			inputSlot.assignedNodes()[0].focus();
		}
}, 100);

However, in your case, the timeout executes too late.

First, the input checks if it should show a valueStateMessage and one of the requirements is to be on focus, which is still false (the timeout is called later) and does not show anything.
Then, the timeout comes and moves the focus to the input.

Using some number, 100 in this case, is not a reliable way, so we have to handle the focus differently. Thanks for reporting.

Best,
ilhan