[Bug report]: Textfield component not emitting "focus" and "blur" events anymore

[bogdan-todireanu]

Requirements before reporting

• No duplicated issue reported.
• I have read the contribution guidelines.
• I have checked the lastest version if the bug exist there. See all avaliable packages at npmJS.com
• I have followed the installation guide.

Package

@scania/theme-light

Package versions

@scania/components@4.10.4

Browser

Chrome

Framework

Angular

Version

Angular 15

Reproduction steps

1. Add component (@scania/components@4.10.4) in an Angular 15 project
2. Listen to "blur" and "focus" events
3. The above mentioned events won't be triggered

The last version of @scania/components that still triggered the events is 4.9.2.

Code example

`<sdds-textfield
type="text"
size="md"
state="{{ !location && !disabled && !loading ? 'error' : '' }}"
(input)="onInput($event)"
(blur)="onBlur()" // onBlur not getting triggered
(focus)="onFocus()" // onFocus not getting triggered
value="{{ location }}"
[disabled]="disabled"
class="sdds-on-white-bg"

`

Screenshots

Add/Copy screenshot here

Expected behaviour

Component Textfield should be emit events when the actual input is focused or blurred

Console errors

Add warning/error message

Contact information

bogdan.todireanu@scania.com

[mJarsater]

This is due to the shadowDOM being removed on the component to allow for it to be used within a form. You can try to check the blur/focus on the underlying input element.

If you are willing to use some vanilla JS, you could try the following out:

const textfield = document.getElementById('textfield-id')
const inputElement = textfield.getElementsByClassName('input')[0]

inputElement.addEventListener('blur', () => {
// do stuff
})

inputElement.addEventListener('focus', () => {
// do stuff
})