Kendo-angular: Blur and Focus Event Dropdowns

[simon11196]

Is there a way to catch the Focus and Blur event in dropdowns?

Plunkr:
http://plnkr.co/edit/0rKLbOKwZjOADMhleXmL?p=preview

No focus or blur event is thrown when you focus or leave the dropdown.

[tapopov]

Hi @simon11196,

The ComboBox currently does not emit focus and blur events. We're interested in the use-cases requiring those events - do you mind sharing one?
On a related note, the DropDownList component does emit both focus and blur, as shown here.

[simon11196]

Hi @tapopov,

I'm using a combobox component in a grid cell template as content.

On every blur event of a cell template content I have to check if the leaved cell is the last one of displayed data, to switch the page programmaticly. (Pageable Grid)

[tapopov]

Thanks for the feedback @simon11196!
We will implement the feature in one of the upcoming releases. Stay tuned.

[KirilNN]

Hi @simon11196,

We have researched the current behavior of the focus/blur events. The DropDownList works as expected if tabindex is provided, and you can test it in this plunkr. The same is not valid for the ComboBox, as the focused element there is the underlying input. In order to provide with the expected focus/blur events we will need to propagate the events from the input. They however will trigger multiple focus/blur events even though the component is still focused. This is why we should trigger custom events instead of relying on DOM events. To do so, we will need to prevent the original DOM events, but currently events cannot be prevented inside HostListener construction.

There is an open issue in the Angular repository: https://github.com/angular/angular/issues/9587

As we are moving the focus to the input elements inside the ComboBox component, when the parent is focused, we will need to prevent that event, so we can emit the correct (according to the component) focus/blur, and currently - we cannot do this.

A possible workaround would be to rely on the DOM focusin/focusout events, however they are currently not supported in the Firefox browser. According to the Mozilla bug tracker and this issue these events were implemented, however they will be released somewhere between March and June, according to the Firefox release cycle.

As soon as any of the above issues are resolved, we will revisit the current implementation and provide any possible improvements.

In the mean time - you can use the present DOM events and detect which is the focused element using document.activeElement and checking if the parent is the component or any other element on the page, so you can detect when the component is blurred.

[aarmora]

Hello @tapopov and @KirilNN,

I am currently using the combobox and wanted to provide my use case for focus and blur events.

We have labels for our input elements that change color when their input element is focused and change back to normal when focus is removed. Without focus/blur events we are unable to do this.

[tsvetomir]

This effort is tracked in #335