diff --git a/apps/browser/src/autofill/services/insert-autofill-content.service.spec.ts b/apps/browser/src/autofill/services/insert-autofill-content.service.spec.ts index b137d2cd7c..ae41f1c9c2 100644 --- a/apps/browser/src/autofill/services/insert-autofill-content.service.spec.ts +++ b/apps/browser/src/autofill/services/insert-autofill-content.service.spec.ts @@ -552,17 +552,30 @@ describe("InsertAutofillContentService", () => { insertAutofillContentService as any, "simulateUserMouseClickAndFocusEventInteractions", ); + jest.spyOn(targetInput, "blur"); insertAutofillContentService["handleFocusOnFieldByOpidAction"]("__0"); expect( insertAutofillContentService["collectAutofillContentService"].getAutofillFieldElementByOpid, ).toBeCalledWith("__0"); + expect(targetInput.blur).not.toHaveBeenCalled(); expect( insertAutofillContentService["simulateUserMouseClickAndFocusEventInteractions"], ).toHaveBeenCalledWith(targetInput, true); expect(elementEventCount).toEqual(expectedElementEventCount); }); + + it("blurs the element if it is currently the active element before simulating click and focus events", () => { + const targetInput = document.querySelector('input[type="text"]') as FormElementWithAttribute; + targetInput.opid = "__0"; + targetInput.focus(); + jest.spyOn(targetInput, "blur"); + + insertAutofillContentService["handleFocusOnFieldByOpidAction"]("__0"); + + expect(targetInput.blur).toHaveBeenCalled(); + }); }); describe("insertValueIntoField", () => { @@ -709,7 +722,7 @@ describe("InsertAutofillContentService", () => { }); describe("triggerPostInsertEventsOnElement", () => { - it("triggers simulated event interactions and blurs the element after", () => { + it("triggers simulated event interactions", () => { const elementValue = "test"; document.body.innerHTML = ``; const element = document.getElementById("username") as FillableFormFieldElement; @@ -725,7 +738,6 @@ describe("InsertAutofillContentService", () => { expect(insertAutofillContentService["simulateInputElementChangedEvent"]).toHaveBeenCalledWith( element, ); - expect(element.blur).toHaveBeenCalled(); expect(element.value).toBe(elementValue); }); }); diff --git a/apps/browser/src/autofill/services/insert-autofill-content.service.ts b/apps/browser/src/autofill/services/insert-autofill-content.service.ts index 32cf76f1a3..82af53f7ff 100644 --- a/apps/browser/src/autofill/services/insert-autofill-content.service.ts +++ b/apps/browser/src/autofill/services/insert-autofill-content.service.ts @@ -184,11 +184,18 @@ class InsertAutofillContentService implements InsertAutofillContentServiceInterf /** * Handles finding an element by opid and triggering click and focus events on the element. - * @param {string} opid - * @private + * To ensure that we trigger a blur event correctly on a filled field, we first check if the + * element is already focused. If it is, we blur the element before focusing on it again. + * + * @param {string} opid - The opid of the element to focus on. */ private handleFocusOnFieldByOpidAction(opid: string) { const element = this.collectAutofillContentService.getAutofillFieldElementByOpid(opid); + + if (document.activeElement === element) { + element.blur(); + } + this.simulateUserMouseClickAndFocusEventInteractions(element, true); } @@ -281,7 +288,6 @@ class InsertAutofillContentService implements InsertAutofillContentServiceInterf } this.simulateInputElementChangedEvent(element); - element.blur(); } /** @@ -378,10 +384,6 @@ class InsertAutofillContentService implements InsertAutofillContentServiceInterf element.dispatchEvent(new Event(simulatedInputEvents[index], { bubbles: true })); } } - - private nodeIsElement(node: Node): node is HTMLElement { - return node.nodeType === Node.ELEMENT_NODE; - } } export default InsertAutofillContentService;