lion/packages/core/src/DisabledWithTabIndexMixin.js

86 lines
2.4 KiB
JavaScript

import { dedupeMixin } from './dedupeMixin.js';
import { DisabledMixin } from './DisabledMixin.js';
/**
* #DisabledWithTabIndexMixin
*
* @polymerMixin
* @mixinFunction
*/
export const DisabledWithTabIndexMixin = dedupeMixin(
superclass =>
// eslint-disable-next-line no-shadow
class DisabledWithTabIndexMixin extends DisabledMixin(superclass) {
static get properties() {
return {
// we use a property here as if we use the native tabIndex we can not set a default value
// in the constructor as it synchronously sets the attribute which is not allowed in the
// constructor phase
tabIndex: {
type: Number,
reflect: true,
attribute: 'tabindex',
},
};
}
constructor() {
super();
this.__isUserSettingTabIndex = true;
this.__restoreTabIndexTo = 0;
this.__internalSetTabIndex(0);
}
makeRequestToBeDisabled() {
super.makeRequestToBeDisabled();
if (this.__requestedToBeDisabled === false) {
this.__restoreTabIndexTo = this.tabIndex;
}
}
retractRequestToBeDisabled() {
super.retractRequestToBeDisabled();
if (this.__requestedToBeDisabled === true) {
this.__internalSetTabIndex(this.__restoreTabIndexTo);
}
}
__internalSetTabIndex(value) {
this.__isUserSettingTabIndex = false;
this.tabIndex = value;
this.__isUserSettingTabIndex = true;
}
_requestUpdate(name, oldValue) {
super._requestUpdate(name, oldValue);
if (name === 'disabled') {
if (this.disabled) {
this.__internalSetTabIndex(-1);
} else {
this.__internalSetTabIndex(this.__restoreTabIndexTo);
}
}
if (name === 'tabIndex') {
if (this.__isUserSettingTabIndex) {
this.__restoreTabIndexTo = this.tabIndex;
}
if (this.tabIndex !== -1 && this.__requestedToBeDisabled === true) {
this.__internalSetTabIndex(-1);
}
}
}
firstUpdated(changedProperties) {
super.firstUpdated(changedProperties);
// for ShadyDom the timing is a little different and we need to make sure
// the tabindex gets correctly updated here
if (this.disabled) {
this.__internalSetTabIndex(-1);
}
}
},
);