Skip to content

Commit 57030e3

Browse files
committed
fix(mask): Correct auto-fill handling with literals
When the browser auto-fills a masked input field, it may include literal characters as part of the filled value. The previous implementation did not correctly handle such cases, leading to incorrect parsing and display of the input value.
1 parent 9710ed0 commit 57030e3

File tree

2 files changed

+19
-1
lines changed

2 files changed

+19
-1
lines changed

src/components/mask-input/mask-input-base.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -119,8 +119,9 @@ export abstract class IgcMaskInputBaseComponent extends IgcInputBaseComponent {
119119

120120
// Potential browser auto-fill behavior
121121
case undefined:
122+
case '':
122123
return this._updateInput(
123-
value.substring(start, this._inputSelection.end),
124+
this._parser.parse(value.substring(start, this._inputSelection.end)),
124125
{
125126
start,
126127
end: this._inputSelection.end,

src/components/mask-input/mask-input.spec.ts

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -622,6 +622,23 @@ describe('Masked input', () => {
622622
expect(element.value).to.equal('xxba');
623623
expect(input.value).to.equal(parser.apply(element.value));
624624
});
625+
626+
it('auto-fill behavior for mask with literals', async () => {
627+
element.mask = '(+35\\9) CCC-CCC';
628+
629+
await elementUpdated(element);
630+
syncParser();
631+
632+
simulateInput(input, {
633+
inputType: undefined, // auto-fill event
634+
skipValueProperty: false,
635+
value: '(+359) 123-456',
636+
});
637+
await elementUpdated(element);
638+
639+
expect(element.value).to.equal('123456');
640+
expect(input.value).to.equal(parser.apply(element.value));
641+
});
625642
});
626643

627644
describe('Form integration', () => {

0 commit comments

Comments
 (0)