Skip to content

Commit

Permalink
Showing 3 changed files with 58 additions and 2 deletions.
21 changes: 19 additions & 2 deletions packages/main/src/Input.ts
Original file line number Diff line number Diff line change
@@ -221,6 +221,7 @@ type InputSuggestionScrollEventDetail = {
/**
* Fired when the value of the component changes at each keystroke,
* and when a suggestion item has been selected.
* @allowPreventDefault
* @public
*/
@event("input")
@@ -1014,8 +1015,15 @@ class Input extends UI5Element implements SuggestionComponent, IFormInputElement
}

_clear() {
const valueBeforeClear = this.value;
this.value = "";
this.fireEvent<InputEventDetail>(INPUT_EVENTS.INPUT, { inputType: "" });
const prevented = !this.fireEvent<InputEventDetail>(INPUT_EVENTS.INPUT, { inputType: "" }, true);

if (prevented) {
this.value = valueBeforeClear;
return;
}

if (!this._isPhone) {
this.fireResetSelectionChange();
this.focus();
@@ -1275,6 +1283,9 @@ class Input extends UI5Element implements SuggestionComponent, IFormInputElement
}

fireEventByAction(action: INPUT_ACTIONS, e: InputEvent) {
const valueBeforeInput = this.value;
const inputRef = this.getInputDOMRefSync();

if (this.disabled || this.readonly) {
return;
}
@@ -1288,7 +1299,13 @@ class Input extends UI5Element implements SuggestionComponent, IFormInputElement

if (isUserInput) { // input
const inputType = e.inputType || "";
this.fireEvent<InputEventDetail>(INPUT_EVENTS.INPUT, { inputType });
const prevented = !this.fireEvent<InputEventDetail>(INPUT_EVENTS.INPUT, { inputType }, true);

if (prevented) {
this.value = valueBeforeInput;
inputRef && (inputRef.value = valueBeforeInput);
}

// Angular two way data binding
this.fireEvent("value-changed");
this.fireResetSelectionChange();
15 changes: 15 additions & 0 deletions packages/main/test/pages/Input.html
Original file line number Diff line number Diff line change
@@ -519,6 +519,11 @@ <h3>Input - open suggestions picker</h3>

<ui5-button id="dynamic-value-state-trigger">Trigger dynamic value state</ui5-button>

<br>

<ui5-input id="prevent-input-event"></ui5-input>
<ui5-input id="prevent-input-event-clear-icon" value="Test" show-clear-icon></ui5-input>

<script>
const dynamicValueState = document.getElementById("dynamic-value-state");
const dynamicValueStateTrigger = document.getElementById("dynamic-value-state-trigger");
@@ -1057,6 +1062,16 @@ <h3>Input - open suggestions picker</h3>
inputNumber3ChangeCount.value = (parseInt(inputNumber3ChangeCount.value) + 1).toString();
});

document.getElementById("prevent-input-event").addEventListener("ui5-input", event => {
if (event.target.value.length > 3) {
event.preventDefault();
}
});

document.getElementById("prevent-input-event-clear-icon").addEventListener("ui5-input", event => {
event.preventDefault();
});

</script>
</body>

24 changes: 24 additions & 0 deletions packages/main/test/specs/Input.spec.js
Original file line number Diff line number Diff line change
@@ -1196,6 +1196,30 @@ describe("Input general interaction", () => {
assert.strictEqual(await changeCount.getHTML(false), "1", "The change event is still called once");
assert.strictEqual(await suggestionsInput.getValue(), "Afghanistan", "Input's value should be the text of the selected item");
});

it("Tests prevented input event", async () => {
const input = await $("#prevent-input-event");
const innerInput = await input.shadow$("input");

await input.click();

await innerInput.keys("a");
await innerInput.keys("b");
await innerInput.keys("c");
await innerInput.keys("d");

// forth input should be prevented
assert.strictEqual(await input.getValue(), "abc", "The value is correct");
});

it("Tests prevented input event with clear icon", async () => {
const input = await $("#prevent-input-event-clear-icon");
const clearIcon = await input.shadow$(".ui5-input-clear-icon-wrapper");

await clearIcon.click();

assert.strictEqual(await input.getValue(), "Test", "The value is not cleared");
});
});

describe("Input arrow navigation", () => {

0 comments on commit 2d19119

Please sign in to comment.