+
Token is already in the list
diff --git a/packages/main/src/Input.ts b/packages/main/src/Input.ts
index 0b45e9194712..7aa627e26903 100644
--- a/packages/main/src/Input.ts
+++ b/packages/main/src/Input.ts
@@ -426,6 +426,16 @@ class Input extends UI5Element implements SuggestionComponent, IFormInputElement
@property({ type: Boolean })
showSuggestions = false;
+ /**
+ * Defines the minimum number of typed characters required before suggestions become active
+ *
+ * @default 1
+ * @public
+ * @since 2.16.0
+ */
+ @property({ type: Number })
+ startSuggestion: number = 1;
+
/**
* Sets the maximum number of characters available in the input field.
*
@@ -773,7 +783,7 @@ class Input extends UI5Element implements SuggestionComponent, IFormInputElement
if (preventOpenPicker) {
this.open = false;
} else if (!this._isPhone) {
- this.open = hasItems && (this.open || (hasValue && isFocused && this.isTyping));
+ this.open = this._shouldTriggerSuggest && hasItems && (this.open || (hasValue && isFocused && this.isTyping));
}
const value = this.value;
@@ -787,7 +797,7 @@ class Input extends UI5Element implements SuggestionComponent, IFormInputElement
// Typehead causes issues on Android devices, so we disable it for now
// If there is already a selection the autocomplete has already been performed
- if (this._shouldAutocomplete && !isAndroid() && !autoCompletedChars && !this._isKeyNavigation) {
+ if (this._shouldAutocomplete && this._shouldTriggerSuggest && !isAndroid() && !autoCompletedChars && !this._isKeyNavigation) {
const item = this._getFirstMatchingItem(value);
if (item) {
if (!this._isComposing) {
@@ -801,14 +811,14 @@ class Input extends UI5Element implements SuggestionComponent, IFormInputElement
onAfterRendering() {
const innerInput = this.getInputDOMRefSync()!;
- if (this.showSuggestions && this.Suggestions?._getPicker()) {
+ if (this._shouldTriggerSuggest && this.showSuggestions && this.Suggestions?._getPicker()) {
this._listWidth = this.Suggestions._getListWidth();
// disabled ItemNavigation from the list since we are not using it
this.Suggestions._getList()._itemNavigation._getItems = () => [];
}
- if (this._performTextSelection) {
+ if (this._shouldTriggerSuggest && this._performTextSelection) {
// this is required to syncronize lit-html input's value and user's input
// lit-html does not sync its stored value for the value property when the user is typing
if (innerInput.value !== this._innerValue) {
@@ -1138,7 +1148,7 @@ class Input extends UI5Element implements SuggestionComponent, IFormInputElement
}
_clearPopoverFocusAndSelection() {
- if (!this.showSuggestions || !this.Suggestions) {
+ if (!this.showSuggestions || !this.Suggestions || !this._shouldTriggerSuggest) {
return;
}
@@ -1939,6 +1949,10 @@ class Input extends UI5Element implements SuggestionComponent, IFormInputElement
return !this.focused && this.Suggestions?.isOpened();
}
+ get _shouldTriggerSuggest() {
+ return this.typedInValue.length >= this.startSuggestion;
+ }
+
/**
* Returns the placeholder value.
* @protected
diff --git a/packages/main/src/features/InputSuggestionsTemplate.tsx b/packages/main/src/features/InputSuggestionsTemplate.tsx
index bd3d917370fa..e18fee3ceba3 100644
--- a/packages/main/src/features/InputSuggestionsTemplate.tsx
+++ b/packages/main/src/features/InputSuggestionsTemplate.tsx
@@ -72,7 +72,7 @@ export default function InputSuggestionsTemplate(this: Input, hooks?: { suggesti
}
- { suggestionsList.call(this) }
+ { this._shouldTriggerSuggest && suggestionsList.call(this) }
{this._isPhone &&
+
+
Input with startSuggestion trigger = 3
+
+
+
+
Input in Compact
@@ -674,6 +680,7 @@ Input Composition
];
var input = document.getElementById('myInput');
+ var inputSuggestionTrigger = document.getElementById('myInputSuggestionTrigger');
var inputChangeWithSuggestions = document.getElementById('inputChange-Suggestions');
var inputGrouping = document.getElementById('myInputGrouping');
var myInput2 = document.getElementById('myInput2');
@@ -831,6 +838,7 @@ Input Composition
var selectionChangeCounter = 0;
input.addEventListener("ui5-input", suggest);
+ myInputSuggestionTrigger.addEventListener("ui5-input", suggest);
inputCompact.addEventListener("ui5-input", suggest);
inputError.addEventListener("ui5-input", suggest);
customSuggestionsInput.addEventListener("ui5-input", suggestCustom);
diff --git a/packages/main/test/pages/MultiInput.html b/packages/main/test/pages/MultiInput.html
index cfbd08f60c7c..c56194a52634 100644
--- a/packages/main/test/pages/MultiInput.html
+++ b/packages/main/test/pages/MultiInput.html
@@ -302,6 +302,21 @@ Tokens + Suggestions
+
+
Tokens + Suggestions + Start Suggestion Trigger = 3
+
+
+
+
+
+
+
+
+
+
+
+
+
Composition
diff --git a/packages/website/docs/_components_pages/main/Input/Input.mdx b/packages/website/docs/_components_pages/main/Input/Input.mdx
index 931b34c319c6..20f3e6ee8849 100644
--- a/packages/website/docs/_components_pages/main/Input/Input.mdx
+++ b/packages/website/docs/_components_pages/main/Input/Input.mdx
@@ -6,6 +6,7 @@ import Basic from "../../../_samples/main/Input/Basic/Basic.md";
import Suggestions from "../../../_samples/main/Input/Suggestions/Suggestions.md";
import ClearIcon from "../../../_samples/main/Input/ClearIcon/ClearIcon.md";
import SuggestionsWrapping from "../../../_samples/main/Input/SuggestionsWrapping/SuggestionsWrapping.md";
+import SuggestionsTrigger from "../../../_samples/main/Input/SuggestionsTrigger/SuggestionsTrigger.md";
import ValueStateMessage from "../../../_samples/main/Input/ValueStateMessage/ValueStateMessage.md";
import Label from "../../../_samples/main/Input/Label/Label.md";
import ValueHelpDialog from "../../../_samples/main/Input/ValueHelpDialog/ValueHelpDialog.md";
@@ -37,6 +38,13 @@ The sample demonstrates how the text of the suggestions wrap when too long.
+### Suggestions Trigger
+When startSuggestion property is set to a custom threshold number,
+the suggestions list, auto completion and typeahead will not be triggered unless the threshold number is met.
+See the startSuggestion property for more information.
+
+
+
### Input and Label
diff --git a/packages/website/docs/_samples/main/Input/SuggestionsTrigger/SuggestionsTrigger.md b/packages/website/docs/_samples/main/Input/SuggestionsTrigger/SuggestionsTrigger.md
new file mode 100644
index 000000000000..17798ecc59ab
--- /dev/null
+++ b/packages/website/docs/_samples/main/Input/SuggestionsTrigger/SuggestionsTrigger.md
@@ -0,0 +1,4 @@
+import html from '!!raw-loader!./sample.html';
+import js from '!!raw-loader!./main.js';
+
+
diff --git a/packages/website/docs/_samples/main/Input/SuggestionsTrigger/main.js b/packages/website/docs/_samples/main/Input/SuggestionsTrigger/main.js
new file mode 100644
index 000000000000..c305ff1567f1
--- /dev/null
+++ b/packages/website/docs/_samples/main/Input/SuggestionsTrigger/main.js
@@ -0,0 +1,28 @@
+import "@ui5/webcomponents/dist/Input.js";
+import "@ui5/webcomponents/dist/SuggestionItem.js";
+import "@ui5/webcomponents/dist/features/InputSuggestions.js";
+
+const input = document.getElementById("input");
+input.addEventListener("input", () => {
+ const value = input.value;
+ let suggestionItems = [];
+ const ui5_database_entries = ["Argentina", "Albania", "Algeria", "Angola",
+ "Austria", "Australia", "Bulgaria", "Canada", "Columbia", "Croatia", "Denmark",
+ "England", "Finland", "France", "Germany", "Hungary", "Ireland", "Italy", "Kuwait",
+ "Luxembourg", "Mexico", "Morocco", "Norway", "Paraguay", "Philippines", "Portugal",
+ "Spain", "Sweden", "Sri Lanka", "Senegal", "Thailand", "The United Kingdom of Great Britain and Northern Ireland", "USA"];
+
+ if (value) {
+ suggestionItems = ui5_database_entries.filter((item) => {
+ return item.toUpperCase().indexOf(value.toUpperCase()) === 0;
+ });
+ }
+ Array.from(input.children).forEach((child) => {
+ input.removeChild(child);
+ });
+ suggestionItems.forEach((item) => {
+ const li = document.createElement("ui5-suggestion-item");
+ li.text = item;
+ input.appendChild(li);
+ });
+});
\ No newline at end of file
diff --git a/packages/website/docs/_samples/main/Input/SuggestionsTrigger/sample.html b/packages/website/docs/_samples/main/Input/SuggestionsTrigger/sample.html
new file mode 100644
index 000000000000..f3a2cd46da5f
--- /dev/null
+++ b/packages/website/docs/_samples/main/Input/SuggestionsTrigger/sample.html
@@ -0,0 +1,20 @@
+
+
+
+
+
+
+
+ Sample
+
+
+
+
+
+
+
+
+
+
+
+