diff --git a/core/src/components/input/input.tsx b/core/src/components/input/input.tsx
index ea8640448c3..d34ea8cccfb 100644
--- a/core/src/components/input/input.tsx
+++ b/core/src/components/input/input.tsx
@@ -231,6 +231,17 @@ export class Input implements ComponentInterface {
*/
@Watch('value')
protected valueChanged() {
+ if (this.nativeInput) {
+ /**
+ * Assigning the native input's value on attribute
+ * value change, allows `ionInput` implementations
+ * to override the control's value.
+ *
+ * Used for patterns such as input trimming (removing whitespace),
+ * or input masking.
+ */
+ this.nativeInput.value = this.getValue();
+ }
this.emitStyle();
this.ionChange.emit({ value: this.value == null ? this.value : this.value.toString() });
}
diff --git a/core/src/components/input/test/masking/e2e.ts b/core/src/components/input/test/masking/e2e.ts
new file mode 100644
index 00000000000..312039b7159
--- /dev/null
+++ b/core/src/components/input/test/masking/e2e.ts
@@ -0,0 +1,20 @@
+import { newE2EPage } from '@stencil/core/testing';
+
+test('input: masking', async () => {
+ const page = await newE2EPage({
+ url: '/src/components/input/test/masking?ionic:_testing=true'
+ });
+
+ const inputTrimmed = await page.find('#inputTrimmed');
+
+ await inputTrimmed.click();
+
+ await page.keyboard.type('S p a c e s');
+
+ const currentValue = await page.$eval('#inputTrimmed', (el: any) => {
+ return el.value;
+ });
+
+ expect(currentValue).toEqual('Spaces');
+
+});
diff --git a/core/src/components/input/test/masking/index.html b/core/src/components/input/test/masking/index.html
new file mode 100644
index 00000000000..e82dbecf235
--- /dev/null
+++ b/core/src/components/input/test/masking/index.html
@@ -0,0 +1,40 @@
+
+
+
+
+
+ Input - Masking
+
+
+
+
+
+
+
+
+
+
+
+
+ Input - Masking
+
+
+
+
+ Input with trimming
+
+
+
+
+
+
+
+
+