feat(form-core): add a way to prevent registration of a form-element

ing-bank · Apr 9, 2024 · 99bcf70 · 99bcf70
1 parent d2edadd
commit 99bcf70
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 7 deletions.
diff --git a/.changeset/spicy-windows-move.md b/.changeset/spicy-windows-move.md
@@ -0,0 +1,5 @@
+---
+'@lion/ui': minor
+---
+
+[form-core] add a way to prevent registration of a form-element
diff --git a/docs/fundamentals/systems/form/use-cases.md b/docs/fundamentals/systems/form/use-cases.md
@@ -82,6 +82,10 @@ export const main = () => {
         <lion-input-email name="email" label="Email"></lion-input-email>
         <lion-input-file name="file" label="File"></lion-input-file>
         <lion-input-tel name="tel" label="Telephone number"></lion-input-tel>
+        <lion-input-tel-dropdown
+          name="tel-dropdown"
+          label="Telephone number"
+        ></lion-input-tel-dropdown>
         <lion-checkbox-group
           label="What do you like?"
           name="checkers"

diff --git a/packages/ui/components/form-core/src/registration/FormRegisteringMixin.js b/packages/ui/components/form-core/src/registration/FormRegisteringMixin.js
@@ -22,6 +22,10 @@ const FormRegisteringMixinImplementation = superclass =>
   class extends superclass {
     constructor() {
       super();
+      /**
+       * In case the form component should not register itself, set this property to true
+       */
+      this.preventRegistration = false;
       /**
        * The registrar this FormControl registers to, Usually a descendant of FormGroup or
        * ChoiceGroup
@@ -45,13 +49,15 @@ const FormRegisteringMixinImplementation = superclass =>
 
     connectedCallback() {
       super.connectedCallback();
-      this.dispatchEvent(
-        new CustomEvent('form-element-register', {
-          detail: { element: this },
-          bubbles: true,
-          composed: Boolean(this.allowCrossRootRegistration),
-        }),
-      );
+      if (!this.preventRegistration) {
+        this.dispatchEvent(
+          new CustomEvent('form-element-register', {
+            detail: { element: this },
+            bubbles: true,
+            composed: Boolean(this.allowCrossRootRegistration),
+          }),
+        );
+      }
     }
 
     disconnectedCallback() {

diff --git a/packages/ui/components/form-core/test-suites/FormRegistrationMixins.suite.js b/packages/ui/components/form-core/test-suites/FormRegistrationMixins.suite.js
@@ -286,6 +286,7 @@ export const runRegistrationSuite = customConfig => {
         expect(eventSpy.getCall(0).args[0].composed).to.equal(true);
         expect(el.formElements).to.deep.equal([el.shadowRoot?.querySelector('#child')]);
       });
+
       it('dispatches the form-element-register event with compose true if allowCrossRootRegistration is set', async () => {
         const eventSpy = sinon.spy();
         /** @type {RegisteringClass} */ (
@@ -300,6 +301,7 @@ export const runRegistrationSuite = customConfig => {
         expect(eventSpy).to.have.been.calledOnce;
         expect(eventSpy.getCall(0).args[0].composed).to.equal(true);
       });
+
       it('dispatches the form-element-register event with compose false if allowCrossRootRegistration is not set', async () => {
         const eventSpy = sinon.spy();
         /** @type {RegisteringClass} */ (
@@ -310,7 +312,29 @@ export const runRegistrationSuite = customConfig => {
         expect(eventSpy).to.have.been.calledOnce;
         expect(eventSpy.getCall(0).args[0].composed).to.equal(false);
       });
+
+      it('will not dispatch form-element-register event when it has "preventRegistration" set', async () => {
+        class BlockingFormElement extends FormRegisteringMixin(LitElement) {
+          constructor() {
+            super();
+            this.preventRegistration = true;
+          }
+        }
+        const tagBlockingChildString = defineCE(BlockingFormElement);
+        const blockingChildTag = unsafeStatic(tagBlockingChildString);
+        const eventSpy = sinon.spy();
+        /** @type {RegisteringClass} */ (
+          await fixture(html`
+            <${blockingChildTag}
+              @form-element-register=${eventSpy}
+            >
+            </${blockingChildTag}>
+          `)
+        );
+        expect(eventSpy).not.to.have.been.calledOnce;
+      });
     });
+
     describe('FormRegistrarPortalMixin', () => {
       it('forwards registrations to the .registrationTarget', async () => {
         const el = /** @type {RegistrarClass} */ (