diff --git a/projects/ui/src/lib/components/po-field/po-input-generic/po-input-generic.spec.ts b/projects/ui/src/lib/components/po-field/po-input-generic/po-input-generic.spec.ts index 354e47b259..c81a3d462b 100644 --- a/projects/ui/src/lib/components/po-field/po-input-generic/po-input-generic.spec.ts +++ b/projects/ui/src/lib/components/po-field/po-input-generic/po-input-generic.spec.ts @@ -240,18 +240,30 @@ describe('PoInputGeneric:', () => { }); it('should call "callOnChange" on eventInput with uppercase', () => { + const fakeInputElement = { + value: '', + selectionStart: 1, + selectionEnd: 3, + setSelectionRange: (start: number, end: number) => {} + }; + const fakeThis = { upperCase: true, callOnChange: (v: any) => {}, validMaxLength: component.validMaxLength, - inputEl: component.inputEl + inputEl: { + nativeElement: fakeInputElement + } }; fakeEvent.target.value = 'teste'; + spyOn(fakeInputElement, 'setSelectionRange'); + spyOn(fakeThis, 'callOnChange'); component.eventOnInput.call(fakeThis, fakeEvent); expect(fakeThis.callOnChange).toHaveBeenCalledWith('TESTE'); - expect(fakeThis.inputEl.nativeElement.value).toBe('TESTE'); + expect(fakeInputElement.value).toBe('TESTE'); + expect(fakeInputElement.setSelectionRange).toHaveBeenCalledWith(1, 3); }); it('should call mask.blur on eventInput with mask', () => { diff --git a/projects/ui/src/lib/components/po-field/po-input-generic/po-input-generic.ts b/projects/ui/src/lib/components/po-field/po-input-generic/po-input-generic.ts index b0068c183e..423f40781a 100644 --- a/projects/ui/src/lib/components/po-field/po-input-generic/po-input-generic.ts +++ b/projects/ui/src/lib/components/po-field/po-input-generic/po-input-generic.ts @@ -91,19 +91,36 @@ export abstract class PoInputGeneric extends PoInputBaseComponent implements Aft eventOnInput(e: any) { let value = ''; + + const inputElement = this.inputEl.nativeElement; + const selectionStart = inputElement.selectionStart; + const selectionEnd = inputElement.selectionEnd; + if (!this.mask) { value = this.validMaxLength(this.maxlength, e.target.value); - this.inputEl.nativeElement.value = value; + inputElement.value = value; } else { this.objMask.blur(e); - this.inputEl.nativeElement.value = this.objMask.valueToInput; + inputElement.value = this.objMask.valueToInput; value = this.objMask.valueToModel; } - this.inputEl.nativeElement.value = this.upperCase - ? String(this.inputEl.nativeElement.value).toUpperCase() - : this.inputEl.nativeElement.value; + + inputElement.value = this.upperCase ? String(inputElement.value).toUpperCase() : inputElement.value; + + const shouldSetSelectionRange = + this.upperCase && typeof selectionStart === 'number' && typeof selectionEnd === 'number'; + + if (shouldSetSelectionRange) { + const cursorStart = Math.min(selectionStart, inputElement.value.length); + const cursorEnd = Math.min(selectionEnd, inputElement.value.length); + + inputElement.setSelectionRange(cursorStart, cursorEnd); + } + value = this.upperCase ? value.toUpperCase() : value; + this.callOnChange(value); + if (this.errorAsyncProperties?.triggerMode === 'changeModel') { this.verifyErrorAsync(); }