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

[mattsteve]

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.

[cjorasch]

If your goal is to trim the value (vs. remove all whitespace) then one potential issue with this approach is that the user will not be able to enter spaces in the middle of content. For example, trying to enter "John Smith" results in "JohnSmith" because the space is trimmed as the user is typing. This happens in the native example in your fiddle.

Changing the value during input can create some strange problems if you type quickly because of async event handling and debouncing. For example, if you type this and quickly into the native example on Safari you get this'd. Maybe because of some autocorrect features?

Normalizing is safer to do on blur or when handling the form content.

[mattsteve]

Irregardless of the specific example, you can see how this would cause problems when trying to implement features that modify user input while typing such as input masks.

Same problem when preventing the user from typing anything but numbers:
https://jsfiddle.net/pk5uq1eL/

If this behaviour works in a native input, I expect it to work in ion-input. Async event handling should have nothing to do with accepting a new value. The last value that was set should be the value that the input uses.

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

[KingMario]

I've published a trim directive for the native input element. https://www.npmjs.com/package/ngx-trim-directive
It lies on a simple fact that Angular listens to input event to bring the view-to-model binding into being.

For ion-input, is it possible to transparently add a trim input property to it and use my directive to do the trick?

[sprengerst]

Still an issue in Ionic 5

[01oseluiz]

Still an issue in Ionic 6.
A workaround for that is set at same time the value for the ion-input component and the native input:
https://codepen.io/jos-luiz/pen/poWqvXq?editors=1011