@lion/ui 0.12.0 → 0.13.0

package/components/combobox/src/LionCombobox.js

@@ -502,6 +502,10 @@ export class LionCombobox extends LocalizeMixin(OverlayMixin(CustomChoiceGroupMi
     if (this._selectionDisplayNode) {
       this._selectionDisplayNode.comboboxElement = this;
     }
+
+    if (this.disabled || this.readOnly) {
+      this.__setComboboxDisabledAndReadOnly();
+    }
   }
 
   /**
@@ -657,9 +661,11 @@ export class LionCombobox extends LocalizeMixin(OverlayMixin(CustomChoiceGroupMi
     const alwaysHideOn = ['Tab', 'Escape'];
     const notMultipleChoiceHideOn = ['Enter'];
     if (
-      lastKey &&
-      (alwaysHideOn.includes(lastKey) ||
-        (!this.multipleChoice && notMultipleChoiceHideOn.includes(lastKey)))
+      this.disabled ||
+      this.readOnly ||
+      (lastKey &&
+        (alwaysHideOn.includes(lastKey) ||
+          (!this.multipleChoice && notMultipleChoiceHideOn.includes(lastKey))))
     ) {
       return false;
     }
@@ -1174,9 +1180,7 @@ export class LionCombobox extends LocalizeMixin(OverlayMixin(CustomChoiceGroupMi
    */
   // eslint-disable-next-line no-unused-vars
   _syncToTextboxCondition(modelValue, oldModelValue, { phase } = {}) {
-    return (
-      this.autocomplete === 'inline' || this.autocomplete === 'both' || phase === 'overlay-close'
-    );
+    return this.autocomplete === 'both' || this.autocomplete === 'inline' || !this.focused;
   }
 
   /**
@@ -1213,8 +1217,22 @@ export class LionCombobox extends LocalizeMixin(OverlayMixin(CustomChoiceGroupMi
    */
   __setComboboxDisabledAndReadOnly() {
     if (this._comboboxNode) {
-      this._comboboxNode.setAttribute('disabled', `${this.disabled}`);
-      this._comboboxNode.setAttribute('readonly', `${this.readOnly}`);
+      // Since `._comboboxNode` can either be `<div "role=combobox">` or `<input>`,
+      // we need to cater for both scenarios (aria for semantics, "native attr" for operability)
+      this._comboboxNode.toggleAttribute('disabled', this.disabled);
+      this._comboboxNode.setAttribute('aria-disabled', `${this.disabled}`);
+      this._comboboxNode.toggleAttribute('readonly', this.readOnly);
+      this._comboboxNode.setAttribute('aria-readonly', `${this.readOnly}`);
+    }
+
+    if (this._inputNode) {
+      // N.B. in case ._inputNode === ._comboboxNode (we have <input role="combobox">)
+      // this value has already been set above. This is fine, as a toggle with boolean flag is idempotent.
+      this._inputNode.toggleAttribute('disabled', this.disabled);
+      this._inputNode.toggleAttribute('readOnly', this.readOnly);
+
+      this._inputNode.setAttribute('aria-readonly', `${this.readOnly}`);
+      this._inputNode.tabIndex = this.disabled ? -1 : 0;
     }
   }
 

package/components/combobox/test/lion-combobox.test.js

@@ -24,12 +24,12 @@ import { isActiveElement } from '../../core/test-helpers/isActiveElement.js';
  */
 
 /**
- * @param {{ autocomplete?:'none'|'list'|'both', matchMode?:'begin'|'all' }} config
+ * @param {{ autocomplete?:'none'|'list'|'both', matchMode?:'begin'|'all', disabled?: boolean, readonly?: boolean }} config
  */
-async function fruitFixture({ autocomplete, matchMode } = {}) {
+async function fruitFixture({ autocomplete, matchMode, disabled, readonly } = {}) {
   const el = /** @type {LionCombobox} */ (
     await fixture(html`
-      <lion-combobox name="foo">
+      <lion-combobox label="Search" name="foo">
         <lion-option .choiceValue="${'Artichoke'}">Artichoke</lion-option>
         <lion-option .choiceValue="${'Chard'}">Chard</lion-option>
         <lion-option .choiceValue="${'Chicory'}">Chicory</lion-option>
@@ -43,6 +43,12 @@ async function fruitFixture({ autocomplete, matchMode } = {}) {
   if (matchMode) {
     el.matchMode = matchMode;
   }
+  if (disabled) {
+    el.disabled = disabled;
+  }
+  if (readonly) {
+    el.readOnly = readonly;
+  }
   await el.updateComplete;
   return [el, el.formElements];
 }
@@ -634,38 +640,39 @@ describe('lion-combobox', () => {
     });
 
     it('syncs textbox to modelValue', async () => {
-      const el = /** @type {LionCombobox} */ (
-        await fixture(html`
-          <lion-combobox name="foo" show-all-on-empty>
-            <lion-option .choiceValue="${'Aha'}" checked>Aha</lion-option>
-            <lion-option .choiceValue="${'Bhb'}">Bhb</lion-option>
-          </lion-combobox>
-        `)
-      );
-      const { _inputNode } = getComboboxMembers(el);
+      for (const autocompleteMode of ['none', 'list', 'inline', 'both']) {
+        const el = /** @type {LionCombobox} */ (
+          await fixture(html`
+            <lion-combobox name="foo" show-all-on-empty .autocomplete="${autocompleteMode}">
+              <lion-option .choiceValue="${'Aa'}" checked>Aa</lion-option>
+              <lion-option .choiceValue="${'Bb'}">Bb</lion-option>
+            </lion-combobox>
+          `)
+        );
+        const { _inputNode } = getComboboxMembers(el);
+
+        expect(_inputNode.value).to.equal('Aa', `autocompleteMode is ${autocompleteMode}`);
 
-      /** @param {string} autocompleteMode */
-      async function performChecks(autocompleteMode) {
         el.formElements[0].click();
         await el.updateComplete;
 
-        // FIXME: fix properly for Webkit
-        // expect(_inputNode.value).to.equal('Aha', `autocompleteMode is ${autocompleteMode}`);
+        expect(_inputNode.value).to.equal('Aa', `autocompleteMode is ${autocompleteMode}`);
         expect(el.checkedIndex).to.equal(0, `autocompleteMode is ${autocompleteMode}`);
 
-        await mimicUserTyping(el, 'Ah');
+        await mimicUserTyping(el, 'B');
         await el.updateComplete;
-        expect(_inputNode.value).to.equal('Ah', `autocompleteMode is ${autocompleteMode}`);
-
-        await el.updateComplete;
-        expect(el.checkedIndex).to.equal(-1, `autocompleteMode is ${autocompleteMode}`);
+        if (autocompleteMode === 'none' || autocompleteMode === 'list') {
+          expect(el.modelValue).to.deep.equal(
+            { type: 'unparseable', viewValue: 'B' },
+            `autocompleteMode is ${autocompleteMode}`,
+          );
+          await el.updateComplete;
+          expect(el.checkedIndex).to.equal(-1, `autocompleteMode is ${autocompleteMode}`);
+        } else {
+          expect(el.modelValue).to.equal('Bb', `autocompleteMode is ${autocompleteMode}`);
+          expect(el.checkedIndex).to.equal(1, `autocompleteMode is ${autocompleteMode}`);
+        }
       }
-
-      el.autocomplete = 'none';
-      await performChecks('none');
-
-      el.autocomplete = 'list';
-      await performChecks('list');
     });
 
     it('works with Required validator', async () => {
@@ -986,6 +993,27 @@ describe('lion-combobox', () => {
       expect(el.modelValue).to.eql(['Art']);
     });
 
+    it('allows prefilling the combobox', async () => {
+      const autocompleteValues = ['inline', 'none', 'both', 'list'];
+
+      for (const autocompleteValue of autocompleteValues) {
+        const el = /** @type {LionCombobox} */ (
+          await fixture(html`
+            <lion-combobox autocomplete="${autocompleteValue}" .modelValue="${'Chard'}" name="foo">
+              <lion-option .choiceValue="${'Artichoke'}">Artichoke</lion-option>
+              <lion-option .choiceValue="${'Chard'}">Chard</lion-option>
+              <lion-option .choiceValue="${'Chicory'}">Chicory</lion-option>
+              <lion-option .choiceValue="${'Victoria Plum'}">Victoria Plum</lion-option>
+            </lion-combobox>
+          `)
+        );
+
+        expect(el.modelValue).to.equal('Chard');
+        // @ts-expect-error
+        expect(el._inputNode.value).to.equal('Chard');
+      }
+    });
+
     it('submits form on [Enter] when listbox is closed', async () => {
       const submitSpy = sinon.spy(e => e.preventDefault());
       const el = /** @type {HTMLFormElement}  */ (
@@ -2312,8 +2340,7 @@ describe('lion-combobox', () => {
           </${tag}>
         `)
         );
-        // This ensures autocomplete would be off originally
-        el.autocomplete = 'list';
+
         await mimicUserTypingAdvanced(el, ['v', 'i']); // so we have options ['Victoria Plum']
         await el.updateComplete;
         expect(el.checkedIndex).to.equal(3);
@@ -2440,23 +2467,26 @@ describe('lion-combobox', () => {
       expect(_inputNode.value).to.equal('');
 
       el.setCheckedIndex(-1);
-      el.autocomplete = 'none';
-      el.setCheckedIndex(0);
-      expect(_inputNode.value).to.equal('');
+      el.autocomplete = 'list';
+      await mimicUserTypingAdvanced(el, ['a', 'r', 't']);
+      expect(_inputNode.value).to.equal('art');
 
       el.setCheckedIndex(-1);
-      el.autocomplete = 'list';
-      el.setCheckedIndex(0);
-      expect(_inputNode.value).to.equal('');
+      el.value = '';
+      el.autocomplete = 'none';
+      await mimicUserTypingAdvanced(el, ['a', 'r', 't']);
+      expect(_inputNode.value).to.equal('art');
 
       el.setCheckedIndex(-1);
+      el.value = '';
       el.autocomplete = 'inline';
-      el.setCheckedIndex(0);
+      await mimicUserTypingAdvanced(el, ['a', 'r', 't']);
       expect(_inputNode.value).to.equal('Artichoke');
 
       el.setCheckedIndex(-1);
+      el.value = '';
       el.autocomplete = 'both';
-      el.setCheckedIndex(0);
+      await mimicUserTypingAdvanced(el, ['a', 'r', 't']);
       expect(_inputNode.value).to.equal('Artichoke');
     });
 
@@ -2476,30 +2506,28 @@ describe('lion-combobox', () => {
       expect(_inputNode.value).to.eql('');
 
       el.setCheckedIndex(-1);
-      el.autocomplete = 'none';
-      el.setCheckedIndex([0]);
-      el.setCheckedIndex([1]);
-      expect(_inputNode.value).to.equal('');
-
       el.setCheckedIndex(-1);
       el.autocomplete = 'list';
-      el.setCheckedIndex([0]);
-      el.setCheckedIndex([1]);
-      expect(_inputNode.value).to.equal('');
+      await mimicUserTypingAdvanced(el, ['a', 'r', 't']);
+      expect(_inputNode.value).to.equal('art');
+
+      el.setCheckedIndex(-1);
+      el.value = '';
+      el.autocomplete = 'none';
+      await mimicUserTypingAdvanced(el, ['a', 'r', 't']);
+      expect(_inputNode.value).to.equal('art');
 
       el.setCheckedIndex(-1);
+      el.value = '';
       el.autocomplete = 'inline';
-      el.setCheckedIndex([0]);
+      await mimicUserTypingAdvanced(el, ['a', 'r', 't']);
       expect(_inputNode.value).to.equal('Artichoke');
-      el.setCheckedIndex([1]);
-      expect(_inputNode.value).to.equal('Chard');
 
       el.setCheckedIndex(-1);
+      el.value = '';
       el.autocomplete = 'both';
-      el.setCheckedIndex([0]);
+      await mimicUserTypingAdvanced(el, ['a', 'r', 't']);
       expect(_inputNode.value).to.equal('Artichoke');
-      el.setCheckedIndex([1]);
-      expect(_inputNode.value).to.equal('Chard');
     });
 
     describe('Subclassers', () => {
@@ -2748,12 +2776,6 @@ describe('lion-combobox', () => {
           async function performChecks(autocompleteMode) {
             await el.updateComplete;
 
-            el.formElements[0].click();
-
-            // FIXME: fix properly for Webkit
-            // expect(_inputNode.value).to.equal('Aha', autocompleteMode);
-            expect(el.checkedIndex).to.equal(0, autocompleteMode);
-
             await mimicUserTypingAdvanced(el, ['A', 'r', 't', 'i']);
             await el.updateComplete;
             expect(_inputNode.value).to.equal('Arti', `autocompleteMode is ${autocompleteMode}`);
@@ -3431,4 +3453,131 @@ describe('lion-combobox', () => {
       });
     });
   });
+
+  describe('Disabled state', () => {
+    it('does not open overlay or allow input when disabled', async () => {
+      const [el] = await fruitFixture({ disabled: true });
+      expect(el.disabled).to.equal(true);
+
+      const { _inputNode } = getComboboxMembers(/** @type {LionCombobox} */ (el));
+
+      expect(el.disabled).to.be.true;
+      expect(_inputNode.disabled).to.be.true;
+
+      // Try to open overlay by clicking input
+      _inputNode.dispatchEvent(new Event('click', { bubbles: true, composed: true }));
+      await el.updateComplete;
+      expect(el.opened).to.be.false;
+    });
+
+    it('does open overlay or allow input when disabled state is removed after it was previously disabled', async () => {
+      const [el] = await fruitFixture({ disabled: true });
+      expect(el.disabled).to.equal(true);
+
+      const { _inputNode } = getComboboxMembers(/** @type {LionCombobox} */ (el));
+
+      expect(el.disabled).to.be.true;
+      expect(_inputNode.disabled).to.be.true;
+
+      // Try to open overlay by clicking input
+      _inputNode.dispatchEvent(new Event('click', { bubbles: true, composed: true }));
+      await el.updateComplete;
+      expect(el.opened).to.be.false;
+
+      el.disabled = false;
+      await el.updateComplete;
+
+      expect(el.disabled).to.be.false;
+      expect(_inputNode.disabled).to.be.false;
+
+      // Try to open overlay by clicking input
+      async function open() {
+        await mimicUserTyping(/** @type {LionCombobox} */ (el), 'ch');
+        return el.updateComplete;
+      }
+
+      await open();
+      expect(el.opened).to.be.true;
+    });
+
+    it('sets aria-disabled and disables focus when combobox is disabled', async () => {
+      const [el] = await fruitFixture({ disabled: true });
+      const { _comboboxNode, _inputNode } = getComboboxMembers(/** @type {LionCombobox} */ (el));
+
+      // input should not be focusable
+      expect(_comboboxNode.tabIndex).to.equal(-1);
+      expect(_inputNode.tabIndex).to.equal(-1);
+
+      // aria-disabled should be set
+      expect(el.getAttribute('aria-disabled')).to.equal('true');
+
+      // aria-disabled should be set
+      expect(_inputNode.getAttribute('aria-disabled')).to.equal('true');
+
+      await expect(el).to.be.accessible();
+    });
+
+    it('ensure focus when combobox is readonly', async () => {
+      const [el] = await fruitFixture({ readonly: true });
+      const { _comboboxNode, _inputNode } = getComboboxMembers(/** @type {LionCombobox} */ (el));
+
+      // input should be focusable
+      expect(_inputNode.tabIndex).to.equal(0);
+
+      // aria-disabled should be set
+      expect(_comboboxNode.getAttribute('aria-readonly')).to.equal('true');
+
+      // aria-disabled should be set
+      expect(_inputNode.getAttribute('aria-readonly')).to.equal('true');
+
+      await expect(el).to.be.accessible();
+    });
+  });
+
+  describe('Readonly state', () => {
+    it('does not open overlay or allow input when readonly', async () => {
+      const [el] = await fruitFixture({ readonly: true });
+
+      const { _inputNode } = getComboboxMembers(/** @type {LionCombobox} */ (el));
+      expect(el.readOnly).to.equal(true);
+
+      expect(el.readOnly).to.be.true;
+      expect(_inputNode.readOnly).to.be.true;
+
+      // Try to open overlay by clicking input
+      _inputNode.dispatchEvent(new Event('click', { bubbles: true, composed: true }));
+      await el.updateComplete;
+      expect(el.opened).to.be.false;
+    });
+
+    it('does open overlay or allow input when readonly state is removed after it was previously set', async () => {
+      const [el] = await fruitFixture({ readonly: true });
+      expect(el.readOnly).to.equal(true);
+
+      const { _inputNode } = getComboboxMembers(/** @type {LionCombobox} */ (el));
+
+      expect(el.readOnly).to.be.true;
+      expect(_inputNode.readOnly).to.be.true;
+
+      // Try to open overlay by clicking input
+      _inputNode.dispatchEvent(new Event('click', { bubbles: true, composed: true }));
+      await el.updateComplete;
+      expect(el.opened).to.be.false;
+
+      el.readOnly = false;
+      await el.updateComplete;
+
+      expect(el.readOnly).to.be.false;
+      expect(_inputNode.readOnly).to.be.false;
+
+      // Try to open overlay by clicking input
+      async function open() {
+        await mimicUserTyping(/** @type {LionCombobox} */ (el), 'ch');
+        return el.updateComplete;
+      }
+
+      await open();
+      expect(el.opened).to.be.true;
+    });
+  });
 });

package/components/form-core/src/FocusMixin.js

@@ -198,6 +198,7 @@ const FocusMixinImplementation = superclass =>
      * @private
      */
     __teardownEventsForFocusMixin() {
+      if (!this._focusableNode) return;
       this._focusableNode?.removeEventListener(
         'focus',
         /** @type {EventListenerOrEventListenerObject} */ (this.__redispatchFocus),

package/components/form-core/src/FormControlMixin.js

@@ -52,7 +52,7 @@ const FormControlMixinImplementation = superclass =>
      * @type {string}
      */
     get label() {
-      return this.__label || (this._labelNode && this._labelNode.textContent) || '';
+      return this.__label ?? (this._labelNode?.textContent || '');
     }
 
     /**
@@ -71,7 +71,7 @@ const FormControlMixinImplementation = superclass =>
      * @type {string}
      */
     get helpText() {
-      return this.__helpText || (this._helpTextNode && this._helpTextNode.textContent) || '';
+      return this.__helpText ?? (this._helpTextNode?.textContent || '');
     }
 
     /**
@@ -158,6 +158,21 @@ const FormControlMixinImplementation = superclass =>
      */
     static enabledWarnings = super.enabledWarnings?.filter(w => w !== 'change-in-update') || [];
 
+    // N.B. add these label/helpText props for types + ce manifest output
+    // (explicity setting them to undefined does not have desired result)
+
+    /**
+     * The label text for the input node.
+     * When no value is defined, textContent of [slot=label] will be used
+     * @property {string} label
+     */
+
+    /**
+     * The helpt text for the input node.
+     * When no value is defined, textContent of [slot=help-text] will be used
+     * @property {string} helpText
+     */
+
     constructor() {
       super();
 
@@ -171,26 +186,12 @@ const FormControlMixinImplementation = superclass =>
        */
       this.readOnly = false;
 
-      /**
-       * The label text for the input node.
-       * When no value is defined, textContent of [slot=label] will be used
-       * @type {string}
-       */
-      this.label = '';
-
       /**
        * The label will only be visible for srceen readers when true
        * @type {boolean}
        */
       this.labelSrOnly = false;
 
-      /**
-       * The helpt text for the input node.
-       * When no value is defined, textContent of [slot=help-text] will be used
-       * @type {string}
-       */
-      this.helpText = '';
-
       /**
        * The model value is the result of the parser function(when available).
        * It should be considered as the internal value used for validation and reasoning/logic.
@@ -293,11 +294,15 @@ const FormControlMixinImplementation = superclass =>
         );
       }
 
-      if (changedProperties.has('label') && this.__label && this._labelNode) {
+      if (changedProperties.has('label') && this.__label !== undefined && this._labelNode) {
         this._labelNode.textContent = this.label;
       }
 
-      if (changedProperties.has('helpText') && this.__helpText && this._helpTextNode) {
+      if (
+        changedProperties.has('helpText') &&
+        this.__helpText !== undefined &&
+        this._helpTextNode
+      ) {
         this._helpTextNode.textContent = this.helpText;
       }
 

package/components/form-core/src/validate/ValidateMixin.js

@@ -420,6 +420,22 @@ export const ValidateMixinImplementation = superclass =>
       await this.__executeValidators();
     }
 
+    /**
+     * @param {Validator} validator
+     * @returns {boolean}
+     */
+    #isInstanceOfRequiredValidator(validator) {
+      // walk prototype and check if validatorName is 'Required'
+      let validatorLvlInPrototype = validator;
+      while (validatorLvlInPrototype) {
+        const ctor = /** @type {typeof Validator} */ (validatorLvlInPrototype.constructor);
+        if (ctor.validatorName === 'Required') return true;
+
+        validatorLvlInPrototype = Object.getPrototypeOf(validatorLvlInPrototype);
+      }
+      return false;
+    }
+
     /**
      * @desc step a1-3 + b (as explained in `validate()`)
      */
@@ -482,7 +498,7 @@ export const ValidateMixinImplementation = superclass =>
       for (const v of this._allValidators) {
         if (/** @type {MetaValidator} */ (v)?.executeOnResults) {
           metaValidators.push(/** @type {MetaValidator} */ (v));
-        } else if (/** @type {typeof Validator} */ (v.constructor)?.validatorName === 'Required') {
+        } else if (this.#isInstanceOfRequiredValidator(v)) {
           // Required validator was already handled
         } else if (/** @type {typeof Validator} */ (v.constructor).async) {
           asyncValidators.push(v);

package/components/form-core/test/FormControlMixin.test.js

@@ -86,6 +86,40 @@ describe('FormControlMixin', () => {
       expect(el.label).to.equal('');
     });
 
+    it('supports empty string as label', async () => {
+      const el = /** @type {FormControlMixinClass} */ (
+        await fixture(html`
+        <${tag} label="With Value">${inputSlot}</${tag}>
+      `)
+      );
+
+      expect(el.label).to.equal('With Value');
+      // @ts-expect-error
+      expect(el._labelNode.innerHTML).to.equal('With Value');
+
+      el.label = '';
+      await el.updateComplete;
+
+      expect(el.label).to.equal('');
+      // @ts-expect-error
+      expect(el._labelNode.innerHTML).to.equal('');
+
+      // Reset
+      el.label = 'With Value';
+      await el.updateComplete;
+
+      expect(el.label).to.equal('With Value');
+      // @ts-expect-error
+      expect(el._labelNode.innerHTML).to.equal('With Value');
+
+      el.setAttribute('label', '');
+      await el.updateComplete;
+
+      expect(el.label).to.equal('');
+      // @ts-expect-error
+      expect(el._labelNode.innerHTML).to.equal('');
+    });
+
     /**
      * N.B. For platform controls, the same would be achieved with <input aria-label="My label">
      * However, since FormControl is usually not the activeElement (_inputNode is), this
@@ -176,6 +210,40 @@ describe('FormControlMixin', () => {
       );
       expect(el.helpText).to.equal('');
     });
+
+    it('supports empty string as help-text', async () => {
+      const el = /** @type {FormControlMixinClass} */ (
+        await fixture(html`
+        <${tag} help-text="With Value">${inputSlot}</${tag}>
+      `)
+      );
+
+      expect(el.helpText).to.equal('With Value');
+      // @ts-expect-error
+      expect(el._helpTextNode.innerHTML).to.equal('With Value');
+
+      el.helpText = '';
+      await el.updateComplete;
+
+      expect(el.helpText).to.equal('');
+      // @ts-expect-error
+      expect(el._helpTextNode.innerHTML).to.equal('');
+
+      // Reset
+      el.helpText = 'With Value';
+      await el.updateComplete;
+
+      expect(el.helpText).to.equal('With Value');
+      // @ts-expect-error
+      expect(el._helpTextNode.innerHTML).to.equal('With Value');
+
+      el.setAttribute('help-text', '');
+      await el.updateComplete;
+
+      expect(el.helpText).to.equal('');
+      // @ts-expect-error
+      expect(el._helpTextNode.innerHTML).to.equal('');
+    });
   });
 
   describe('Accessibility', () => {

package/components/form-core/test-suites/ValidateMixin.suite.js

@@ -130,6 +130,7 @@ export function runValidateMixinSuite(customConfig) {
         expect(el.hasFeedbackFor).to.deep.equal(['error']);
       });
 
+      // TODO: keep this use case for backwards compatibility or just required extending Required?
       it('determines whether the "Required" validator was already handled by judging the validatorName', async () => {
         class BundledValidator extends EventTarget {
           static ['_$isValidator$'] = true;
@@ -163,9 +164,7 @@ export function runValidateMixinSuite(customConfig) {
         }
 
         class BundledRequired extends BundledValidator {
-          static get validatorName() {
-            return 'Required';
-          }
+          static validatorName = 'Required';
         }
 
         const el = /** @type {ValidateElement} */ (
@@ -180,6 +179,23 @@ export function runValidateMixinSuite(customConfig) {
         expect(el.hasFeedbackFor).to.deep.equal([]);
       });
 
+      it('determines whether the "Required" validator was already handled by judging the validatorName', async () => {
+        class MyRequired extends Required {
+          static validatorName = 'SomethingOtherThanRequired';
+        }
+
+        const el = /** @type {ValidateElement} */ (
+          await fixture(html`
+            <${tag}
+            .validators=${[new MyRequired()]}
+            .modelValue=${'myValue'}
+          >${lightDom}</${tag}>
+          `)
+        );
+
+        expect(el.hasFeedbackFor).to.deep.equal([]);
+      });
+
       it('determines whether the passed Validators are ResultValidators judging by the presence of "executeOnResults"', async () => {
         class ValidateElementWithSuccessType extends ValidateElement {
           static get validationTypes() {