Aurelia unwanted letters appearing in text input after number format convert. - aurelia

Question

I have a text input for a card number. It should only contain numbers and has to be shown to the user as 4-digit blocks (example: 1234 5678 9123 4567).
My code successfully removes entered letters and creates the number blocks. The problem is that when I type a single non-digit key two times, that key shows up in the input once, seemingly ignoring the value converter. This does not happen when trying to type different letters in a row. Any third input will delete the letter as it should, but the problem does not disappear.
Using console.log, I can see that toView always returns the correct value. Is there any way to fix this? I tried adding ' pattern="^[\d ]*$" ' to the input but that does literally nothing.
Examples at the bottom.
Html:
<input type="text" id="cardNumber" class="form-control" placeholder="1234 5678 9123 4567"
value.bind="cardNumber | cardNumberFormat & validate" disabled.bind="isDisabled">
Javascript:
export class CardNumberFormatValueConverter {
toView(value) {
let cardNumberBlocks = this.createCardNumberBlocks(value);
if (cardNumberBlocks) {
return cardNumberBlocks.join(" ");
}
return "";
}
fromView(value) {
return value.split(" ").join("");
}
createCardNumberBlocks(value) {
if (!value) return "";
return value.match(/\d{1,4}/g);
}
}
Examples:
Typing : 123456 - Result : 1234 56 - Correct
Typing : 123456a - Result : 1234 56 - Correct
Typing : 123456a2 - Result : 1234 562 - Correct
Typing : 123456aa - Result : 1234 56a - Wrong
Typing : 123456aa2 - Result : 1234 562 - Correct
Typing : 123456ab - Result : 1234 56 - Correct
Typing : 123456aaa - Result : 1234 56 - Correct
Typing : 123456aba - Result : 1234 56 - Correct
Typing : 123456aa3bb - Result : 1234 563b - Wrong
Typing : 123456aabbb - Result : 1234 56b - Wrong