sap.m.Input FilterFunction

[wernerdaehn]

OpenUI5 version: 1.108.6

Browser/version (+device/version): Windows, Chrome, latest

Steps to reproduce the problem:

1. Create an aggregation binding for an sap.m.Input.
2. Set the FilterFunction to use a contains logic.

What is the expected result?

1. When the suggestion items aggregation contains the text "MYITEM" and the entered text in the input is "ITEM" it should show "MYITEM"

What happens instead?

1. No suggestion items are shown in above case. Only when the entered text is "MYI" the suggestions are shown

Any other information? (attach screenshot if possible)

1. I suspect that the clone method does not consider the FilterFunction.
2. Frankly, how do you actually set the filter function for such a use case? It should be a property but there is none.
3. With custom filter functions there are other side effects, e.g. the text highlighting in the suggestion list does not work.
4. Another option to fix above would be to add a property/enum for the FilterFunction: BEGIN_CASESENSITIVE, CONTAINS_CASEINSENSITIVE, ... As this is a property it will be cloned and we do not need a custom filterfunction any longer.
5. My current workaround is to set the filter function in the suggest event. Not nice.

Note: As it is not so easy to set the FilterFunction, hence I am using custom controls, e.g.

		this.bindAggregation("projections", {
				path: "projections",     
				template: new ui5app.controls.Projection()
			});

and in the projection control

	init : function() {
		Control.prototype.init.call(this);
		this.setAggregation("_expression", new sap.m.Input( {
			width: "20em",
			value: "{value}",
			showSuggestion: true
			} ));
		this.getAggregation("_expression").setFilterFunction(function (sTerm, oItem) {
				return oItem.getText().match(new RegExp(sTerm, "i"));
			}
		);
	},

[boghyon]

What is the expected result?

1. When the suggestion items aggregation contains the text "MYITEM" and the entered text in the input is "ITEM" it should show "MYITEM"

What happens instead?

1. No suggestion items are shown in above case. Only when the entered text is "MYI" the suggestions are shown

In this "Input - Suggestions - Custom" sample, when entering "asic", the corresponding suggestion items are shown.
The custom filter function in that sample is also oItem.getText().match(new RegExp(sTerm, "i")).

Could you share a link to a minimal sample where no suggestion items are shown? Or did I miss something?

[wernerdaehn]

My guess was, as stated above, it is the aggregation binding that makes the difference.

I do not have an example at hand, my setup requires a lot of things. But take your sample and put it inside a sap.m.Table, so that you have as many rows as in a json model.

Your first problem will be how to add the custom filter via an XML View. And then my statement is, that the behavior of the control in the rows will not be the same as in the original sample.

[boghyon]

I guess we have two separate issues here then:

1. sap.m.Input missing a "filterFunction" as one of the control's properties with the type: "function" which would allow app developers to assign their function also declaratively in XML.
   Cf. also https://github.com/SAP/openui5/issues/1908
2. Given the sample "Input - Suggestions - Custom" (Input with a custom filter function), entering "asic" should also highlight the matched text fragments in the suggestions → "Notebook Basic 15"
   The "asic" in the suggestions are currently not highlighted.

Is that correct?

[wernerdaehn]

Yes, that is my verdict as well.

[50gY]

Thank you for sharing this finding. I've created the following internal incidents:

• 2370058629 for the highlight issue
• 2370058651 (BGSOFUIRILA-3623) for the filterFunction property

The status of the issue will be updated here in GitHub.

[MapTo0]

Hello @wernerdaehn ,

The highlighting is working by design as mentioned in the guidelines for all inputs As a visual hint for the user, the matched characters are highlighted in the option list items. The highlighting works on the basis of “starts with per term”, regardless of the filtering method.

• ComboBox: https://experience.sap.com/fiori-design-web/combo-box/#filtering-the-option-list
• MultiComboBox: https://experience.sap.com/fiori-design-web/multi-combobox/
• MultiInput: https://experience.sap.com/fiori-design-web/multiinput/

Anyway, I have asked the design team to add this to the input guideline as well.

Furthermore, we are working on another improvement of the Inputs to provide an API for a custom highlight function (similar to filter function but for highlighting).

Hope that helps.

Best Regards, Martin