bug: ion-input not updating value if space trimmed equivalent of value changes

Bug Report

Ionic version: [x] 4.11.4

Current behavior: When setting an ion-input’s value to a trimmed version of its previous value, the input does not recognize the value change. Therefore, there is no way to enforce input value trimming while typing inside an ion-input or after leaving an ion-input.

Expected behavior: Setting the value of an ion-input should accept any string and update accordingly.

Steps to reproduce:

1. Initialize an ion-input on the page.
2. Listen to the ionInput event.
3. Inside the inputInput event, set the input’s value to a trimmed version of its own value.

Related code:

JS FIDDLE: https://jsfiddle.net/kpe14jwz/3/

<ion-item>
        <ion-label position="floating">Type here</ion-label>
        <ion-input id="ionInput"></ion-input>
</ion-item>

document.getElementById('ionInput')
.addEventListener('ionInput', (e) => {
	e.target.value = e.target.value.trim();
});

Ionic Info:

N/A. Working out of jsfiddle with CDN.

[sprengerst]

Still an issue in Ionic 5

[liamdebeasi]

Thanks for the issue. This appears to be a regression that appeared in Ionic 4.6.0, so I will mark this as a bug.

Example in Ionic 4.5.0: https://codepen.io/liamdebeasi/pen/RwwBYop Example in Ionic 4.6.0: https://codepen.io/liamdebeasi/pen/YzzjONN

As a temporary workaround you can do something like:

input.addEventListener('ionInput', (e) => {
  window.requestAnimationFrame(() => {
    e.target.value = e.target.value.replace(/[^0-9]/g, '');
  });
});