DisabledMixin

Tracks the disabled state of a component that can be disabled
OVERVIEW | USAGE | API

Overview

Purpose: Tracks the disabled state of a component that can be disabled.

This mixin primarily works in the middle of the Elix render pipeline:

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

Expects the component to provide:

  • setState method compatible with ReactiveMixin's setState.

Provides the component with:

  • disabled property, attribute, and state member that can be invoked to disable the component.

Usage

import DisabledMixin from "elix/src/base/DisabledMixin.js";
import ReactiveElement from "elix/define/ReactiveElement.js";
class MyElement extends DisabledMixin(ReactiveElement) {}
customElements.define("my-element", MyElement);

const element = new MyElement();
element.disabled = true; // Sets disabled property
element.hasAttribute("disabled"); // True
element.setAttribute("disabled", ""); // Sets property to true
element.setAttribute("disabled", "false"); // Also sets property to true!
element.removeAttribute("disabled"); // Sets property to false
element.disabled = false; // More direct way to set property to false

The marshaling of a Boolean attribute from markup to a property and back has some subtleties, as shown above. DisabledMixin helps ensure that those subtleties are covered properly.

Example

Demo: A DropdownList uses DisabledMixin to stop responding to clicks when disabled ⇲

API

Used by classes AutoCompleteComboBox, ComboBox, DateComboBox, DropdownList, FilterComboBox, ListComboBox, MenuButton, MenuItem, NumberSpinBox, Option, PlainAutoCompleteComboBox, PlainChoice, PlainComboBox, PlainDateComboBox, PlainDropdownList, PlainExpandCollapseToggle, PlainFilterComboBox, PlainListComboBox, PlainMenuButton, PlainMenuItem, PlainNumberSpinBox, PlainPopupButton, PlainPopupSource, PlainSpinBox, PopupButton, PopupSource, SpinBox, TooltipButton, and UpDownToggle.

disabled property

True if the component is disabled, false (the default) if not.

The value of this property will be reflected to the disabled attribute so that it can be referenced in CSS. Note that this non-native implementation of the disabled attribute will not trigger the :disabled CSS pseudo-class, so your style rules will have to reference the presence or absence of the disabled attribute. That is, instead of writing

my-component:disabled { ... }

write this instead

my-component[disabled] { ... }

Like the native disabled attribute, this attribute is boolean. That means that it's existence in markup sets the attribute, even if set to an empty string or a string like "false".

Type: boolean

Default: false

disabledchange event

Raised when the disabled property changes.