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

[YonatanKra]

1. Add blur listener to the dial pad
2. Type 1 number
3. Delete number using the backspace button in the text-field
4. See that focus remains inside the dial pad

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 100.00%. Comparing base (d61b119) to head (662a66f).
Report is 1123 commits behind head on main.

Additional details and impacted files

@@             Coverage Diff             @@
##              main     #1912     +/-   ##
===========================================
  Coverage   100.00%   100.00%             
===========================================
  Files          123       353    +230     
  Lines         1562      6976   +5414     
  Branches       108       902    +794     
===========================================
+ Hits          1562      6976   +5414     

Flag	Coverage Δ
unittests	100.00% <100.00%> (ø)

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[RichardHelm]

Why would this be needed?
If there is actually a reason for it needs to be explained in a comment

Suggested change

	document.addEventListener(
	'blur',
	this.#blurHandlerAfterDeleteButtonRemoved,
	true
	);
	this._textFieldEl.focus();

[YonatanKra]

1. We need to prevent the focus event from firing
2. This is tested
3. I've wrapped the logic in a function with a descriptive name.

[RichardHelm]

I don't understand. The component will not emit focus (or blur) when focus moves within, so this should not be necessary.

[YonatanKra]

See the related issue.
When pressing the delete button (in the UI) to delete the last character in the input, it fires a blur event and the dial pad loses focus. This makes sure it leaves the focus in the dial pad.
See the descriptions:

[YonatanKra]

This solves the problem of focus leaving the component after deleting the last character. Focus does not remain inside the component hence the event being fired.

[RichardHelm]

Yes I understand that. But how does the suggested change not resolve the issue? Focus moves to text-field, therefore no blur (or focus) will be emitted on the dial-pad

[YonatanKra]

Oh, I see what you mean.
The focus will happen before the event dispatches.
Nice one, thanks!