fix(dial-pad): prevent focus loss after removal of delete button (VIV…

…-2126) (#1912)

libs/components/src/lib/dial-pad/dial-pad.spec.ts

@@ -57,8 +57,7 @@ describe('vwc-dial-pad', () => {
 
 		it('should set value in text field when has value attribute', async function () {
 			const value = '123';
-			element.value = value;
-			await elementUpdated(element);
+			await setValue(value);
 			expect(getTextField().value).toEqual(value);
 		});
 
@@ -145,30 +144,67 @@ describe('vwc-dial-pad', () => {
 		});
 	});
 
+	async function setValue(value: string) {
+		element.value = value;
+		await elementUpdated(element);
+	}
+
 	describe('delete', function () {
-		it('should show delete button when text field has value', async function () {
-			element.value = '123';
+		async function clickDeleteButton() {
+			getDeleteButton().click();
 			await elementUpdated(element);
+		}
+
+		it('should show delete button when text field has value', async function () {
+			await setValue('123');
 			expect(getDeleteButton()).not.toBeNull();
 		});
 
 		it('should remove last character from text field when clicked on delete button', async function () {
-			element.value = '123';
-			await elementUpdated(element);
-			getDeleteButton().click();
-			await elementUpdated(element);
+			await setValue('123');
+
+			await clickDeleteButton();
+
 			expect(getTextField().value).toEqual('12');
 		});
 
 		it('should emit a change event', async () => {
 			const spy = jest.fn();
 			element.addEventListener('change', spy);
-			element.value = '123';
-			await elementUpdated(element);
-			getDeleteButton().click();
-			await elementUpdated(element);
+			await setValue('123');
+
+			await clickDeleteButton();
+
 			expect(spy).toHaveBeenCalledTimes(1);
 		});
+
+		it('should emit an input event', async () => {
+			const spy = jest.fn();
+			element.addEventListener('input', spy);
+			await setValue('123');
+
+			await clickDeleteButton();
+
+			expect(spy).toHaveBeenCalledTimes(1);
+		});
+
+		it('should prevent blur event after deleting the last value', async () => {
+			const spy = jest.fn();
+			element.addEventListener('blur', spy);
+			await setValue('1');
+
+			await clickDeleteButton();
+
+			expect(spy).toHaveBeenCalledTimes(0);
+		});
+
+		it('should focus on the dialpad after deleting the last element', async () => {
+			await setValue('1');
+
+			await clickDeleteButton();
+
+			expect(document.activeElement === element).toBe(true);
+		});
 	});
 
 	describe('dial', function () {
@@ -237,8 +273,7 @@ describe('vwc-dial-pad', () => {
 		it('should fire dial event when enter is pressed on input', async function () {
 			const spy = jest.fn();
 			element.addEventListener('dial', spy);
-			element.value = '123';
-			await elementUpdated(element);
+			await setValue('123');
 			const input: HTMLInputElement = getTextField().querySelector(
 				'input'
 			) as HTMLInputElement;
@@ -255,17 +290,15 @@ describe('vwc-dial-pad', () => {
 		it('should fire dial event with value when clicked on call button', async function () {
 			const spy = jest.fn();
 			element.addEventListener('dial', spy);
-			element.value = '123';
-			await elementUpdated(element);
+			await setValue('123');
 			getCallButton().click();
 			expect(spy).toHaveBeenCalledTimes(1);
 		});
 
 		it('should prevent dial event when enter is pressed on delete button', async function () {
 			const spy = jest.fn();
-			element.value = '123';
+			await setValue('123');
 			element.addEventListener('dial', spy);
-			await elementUpdated(element);
 			getDeleteButton().dispatchEvent(
 				new KeyboardEvent('keydown', { key: 'Enter' })
 			);
@@ -440,8 +473,7 @@ describe('vwc-dial-pad', () => {
 
 		it('should set delete button disabled when has disabled attribute', async function () {
 			element.disabled = true;
-			element.value = '123';
-			await elementUpdated(element);
+			await setValue('123');
 			expect(getDeleteButton().disabled).toEqual(true);
 		});
 	});
@@ -463,8 +495,7 @@ describe('vwc-dial-pad', () => {
 
 		it('should set the delete button to be disabled', async function () {
 			element.callActive = true;
-			element.value = '123';
-			await elementUpdated(element);
+			await setValue('123');
 			expect(getDeleteButton().disabled).toBe(true);
 		});
 	});

libs/components/src/lib/dial-pad/dial-pad.template.ts

@@ -104,6 +104,15 @@ function stopPropagation(_: DialPad, { event: e }: ExecutionContext) {
 	e.stopImmediatePropagation();
 }
 
+function deleteLastCharacter(dialPad: DialPad) {
+	dialPad.value = dialPad.value.slice(0, -1);
+	dialPad.$emit('input');
+	dialPad.$emit('change');
+	if (dialPad.value === '') {
+		dialPad._textFieldEl.focus();
+	}
+}
+
 function renderTextField(textFieldTag: string, buttonTag: string) {
 	return html<DialPad>`<${textFieldTag} ${ref(
 		'_textFieldEl'
@@ -121,12 +130,13 @@ function renderTextField(textFieldTag: string, buttonTag: string) {
          ${when(
 						(x) => x.value && x.value.length && x.value.length > 0,
 						html`<${buttonTag}
-                slot="action-items" size='super-condensed' icon="backspace-line" aria-label="${(
-									x
-								) => x.deleteAriaLabel || x.locale.dialPad.deleteLabel}"
-								appearance='ghost' ?disabled="${(x) => x.disabled || x.callActive}" @click="${(
-							x
-						) => x._deleteLastCharacter()}">
+                				slot="action-items" 
+								size='super-condensed' 
+								icon="backspace-line" 
+								aria-label="${(x) => x.deleteAriaLabel || x.locale.dialPad.deleteLabel}"
+								appearance='ghost' 
+								?disabled="${(x) => x.disabled || x.callActive}" 
+								@click="${(x) => deleteLastCharacter(x)}">
             </${buttonTag}>`
 					)}
         </${textFieldTag}>`;

libs/components/src/lib/dial-pad/dial-pad.ts

@@ -143,15 +143,6 @@ export class DialPad extends FoundationElement {
 	_onDial = () => {
 		this.callActive ? this.$emit('end-call') : this.$emit('dial');
 	};
-
-	/**
-	 *
-	 * @internal
-	 */
-	_deleteLastCharacter = () => {
-		this.value = this.value.slice(0, -1);
-		this.$emit('change');
-	};
 }
 
 export interface DialPad extends Localized {}