fix(vwc-textfield): dispatch focus/blur events programmatically (#697)

* fix(vwc-textfield): dispatch focus/blur events programmatically * test focus & blur * small adjusts Co-authored-by: Yuri Guller <gullerya@gmail.com>
Vonage · Mar 11, 2021 · ff68295 · ff68295
1 parent 4d31499
commit ff68295
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 2 deletions.
diff --git a/components/textfield/src/vwc-textfield.ts b/components/textfield/src/vwc-textfield.ts
@@ -161,8 +161,15 @@ export class VWCTextField extends MWCTextField {
 		const fe = this.formElement;
 
 		//	event listeners
-		fe.onfocus = this.onInputFocus.bind(this);
-		fe.onblur = this.onInputBlur.bind(this);
+		fe.onfocus = () => {
+			this.dispatchEvent(new FocusEvent('focus', { composed: true }));
+			this.onInputFocus();
+		};
+
+		fe.onblur = () => {
+			this.dispatchEvent(new FocusEvent('blur', { composed: true }));
+			this.onInputBlur();
+		};
 
 		//	attributes
 		setAttributeByValue('id', this.id, fe);

diff --git a/components/textfield/test/textfield.test.js b/components/textfield/test/textfield.test.js
@@ -59,6 +59,28 @@ describe('textfield', () => {
 		assertComputedStyle(te, { pointerEvents: 'none' });
 	});
 
+	describe('events', () => {
+		it(`should trigger ${COMPONENT_NAME} focus & blur`, async function () {
+			let count = 0;
+			const [textfield] = addElement(
+				textToDomToParent(`<${COMPONENT_NAME}></${COMPONENT_NAME}>`)
+			);
+			await waitNextTask();
+			textfield.addEventListener('focus', () => count++);
+			textfield.addEventListener('blur', () => count++);
+			const input = textfield.querySelector('input');
+			input.focus();
+			await waitNextTask();
+			expect(textfield.focused).true;
+
+			input.blur();
+			await waitNextTask();
+			expect(textfield.focused).false;
+
+			expect(count).to.equal(2);
+		});
+	});
+
 	describe('typography', () => {
 		typographyTestCases(COMPONENT_NAME);
 	});