UI5 / UI5/openui5

sap.m.Input FilterFunction

Open
#3,748 7 comments 0 reactions 1 assignee View on GitHub

@hristop is already working on this.

Since Feb 12, 2025.

enhancement in progress
Dominant language
JavaScript
Stars
3.3k
Forks
1.3k
PR merge metrics
No merged PRs in 30d

Description

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.
image image

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"));
			}
		);
	},

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.