DelegateFocusMixin

Delegates a component's focus to its first focusable shadow element
OVERVIEW | USAGE | API

Overview

Purpose: Delegates a component's focus to its first focusable shadow element

This mixin works at the beginning of the Elix render pipeline:

events ➞ methods → setState → render DOM → post-render

Provides the component with:

  • internal.delegatesFocus property that returns true. This is used by ShadowTemplateMixin to determine whether to specific the delegatesFocus option when calling attachShadow.
  • focus method override. When invoked, the component will forward the focus on to the first focusable element in its shadow tree.

Usage

import DelegateFocusMixin from "elix/src/base/DelegateFocusMixin.js";
class MyElement extends DelegateFocusMixin(HTMLElement) {}

The DOM specification defines a standard property on a ShadowRoot called delegatesFocus, which can be specified in the call to attachShadow. However, as of April 2019, only Chrome supports delegatesFocus. The DelegateFocusMixin serves as a polyfill for that property.

If the user's browser supports delegatesFocus natively, this mixin has no effect.

API

Used by classes AutoCompleteComboBox, AutoCompleteInput, AutoSizeTextarea, Button, CalendarDayButton, ComboBox, DateComboBox, DateInput, DropdownList, FilterComboBox, HamburgerMenuButton, Input, ListComboBox, ListWithSearch, Menu, MenuButton, NumberSpinBox, PlainArrowDirectionButton, PlainAutoCompleteComboBox, PlainAutoCompleteInput, PlainAutoSizeTextarea, PlainBorderButton, PlainButton, PlainCalendarDayButton, PlainComboBox, PlainDateComboBox, PlainDateInput, PlainDropdownList, PlainFilterComboBox, PlainHamburgerMenuButton, PlainInput, PlainListComboBox, PlainListWithSearch, PlainMenu, PlainMenuButton, PlainNumberSpinBox, PlainPageDot, PlainPopupButton, PlainRepeatButton, PlainSelectableButton, PlainSpinBox, PlainTabButton, PopupButton, RepeatButton, SelectableButton, SpinBox, TabButton, TooltipButton, and WrappedStandardElement.

delegatesFocus property

Returns true if the component is delegating its focus.

A component using DelegateFocusMixin will always have this property be true unless a class takes measures to override it.

Type: boolean

Default: true