kit-focus-listener

API

[class] KitFocusListenerModule

@NgModule

Exports:[ KitSkipBlurDirective, ]

[class] KitFocusListenerService

@Injectable

Handles focus/blur from a group of elements.

If focus moves among elements in a defined group, blur event will not be fired.

Be aware that click on non-focusable elements will cause blur event (focus switch to <body>).

Use [kitSkipBlur] when you need to add overlayed (*kitOverlay) element to a group.

Example

In ui-autocomplete we heed to omit blur event, if user click on a suggestion.

We provide KitFocusListenerService in the directive, register main input and ui-autocomplete-options element in the service and subscribe on blur event.

Members

SignatureDescription
get focus(): Observable<any>

Emits, if user focuses one of registered element.

get focusWithin(): Observable<any>

Emits, if user focuses one of registered element or move focus among registered elements.

get blur(): Observable<any>

Emits, if focus leave one of registered element and target node is not one of registered element (or it's child).

get focused(): boolean

Is one of registered element focused now.

add(el: HTMLElement)
remove(el: HTMLElement)

[class] KitSkipBlurDirective

@Directive

Selector:'[kitSkipBlur]'

Registers element in KitFocusListener to avoid emitting blur if focus moves to the current element.

Important when you use *kitOverlay, because items are placed in overlay-container outside of a current component.

Members

SignatureDescription
@Input() kitSkipBlur: void