@lion/form-core - npm Package Compare versions

Comparing version 0.7.1 to 0.7.2

CHANGELOG.md

 # Change Log
 
+## 0.7.2
+
+### Patch Changes
+
+- 77114753: Stop propagation of label click event in choice inputs to deduplicate the click event on the choice input.
+- f98aab23: Make \_\_parentFormGroup --> \_parentFormGroup so it is protected and not private
+- f98aab23: Make \_\_toggleChecked protected property (\_toggleChecked)
+
 ## 0.7.1
@@ -4,0 +12,0 @@

package.json

 {
   "name": "@lion/form-core",
-  "version": "0.7.1",
+  "version": "0.7.2",
   "description": "Form-core contains all essential building blocks for creating form fields and fieldsets",
@@ -5,0 +5,0 @@ "license": "MIT",

src/choice-group/ChoiceGroupMixin.d.ts

@@ -6,5 +6,5 @@ export type ChoiceGroupMixin = typeof import("../../types/choice-group/ChoiceGroupMixinTypes.js").ChoiceGroupImplementation;
 export type FormControl = import("../../types/FormControlMixinTypes.js").FormControlHost & HTMLElement & {
-    __parentFormGroup?: HTMLElement | undefined;
+    _parentFormGroup?: HTMLElement | undefined;
     checked?: boolean | undefined;
 };
 export type ChoiceInputHost = import("../../types/choice-group/ChoiceInputMixinTypes.js").ChoiceInputHost;

src/choice-group/ChoiceGroupMixin.js

@@ -9,3 +9,3 @@ import { dedupeMixin } from '@lion/core';
  * @typedef {import('../../types/registration/FormRegistrarMixinTypes').ElementWithParentFormGroup} ElementWithParentFormGroup
- * @typedef {FormControlHost & HTMLElement & {__parentFormGroup?:HTMLElement, checked?:boolean}} FormControl
+ * @typedef {FormControlHost & HTMLElement & {_parentFormGroup?:HTMLElement, checked?:boolean}} FormControl
  * @typedef {import('../../types/choice-group/ChoiceInputMixinTypes').ChoiceInputHost} ChoiceInputHost
@@ -12,0 +12,0 @@ */

src/choice-group/ChoiceInputMixin.d.ts

@@ -5,5 +5,5 @@ export type ChoiceInputMixin = typeof import("../../types/choice-group/ChoiceInputMixinTypes.js").ChoiceInputImplementation;
 export type FormControl = import("../../types/FormControlMixinTypes.js").FormControlHost & HTMLElement & {
-    __parentFormGroup?: HTMLElement | undefined;
+    _parentFormGroup?: HTMLElement | undefined;
     checked?: boolean | undefined;
 };
 export type ChoiceInputModelValue = import("../../types/choice-group/ChoiceInputMixinTypes.js").ChoiceInputModelValue;

src/choice-group/ChoiceInputMixin.js

@@ -8,3 +8,3 @@ /* eslint-disable class-methods-use-this */
  * @typedef {import('../../types/FormControlMixinTypes').FormControlHost} FormControlHost
- * @typedef {FormControlHost & HTMLElement & {__parentFormGroup?:HTMLElement, checked?:boolean}} FormControl
+ * @typedef {FormControlHost & HTMLElement & {_parentFormGroup?:HTMLElement, checked?:boolean}} FormControl
  * @typedef {import('../../types/choice-group/ChoiceInputMixinTypes').ChoiceInputMixin} ChoiceInputMixin
@@ -119,5 +119,5 @@ * @typedef {import('../../types/choice-group/ChoiceInputMixinTypes').ChoiceInputModelValue} ChoiceInputModelValue
         // @ts-expect-error not all choice inputs have a parent form group, since this mixin does not have a strict contract with the registration system
-        this.__parentFormGroup &&
+        this._parentFormGroup &&
         // @ts-expect-error
-        this.__parentFormGroup.name !== this.name
+        this._parentFormGroup.name !== this.name
       ) {
@@ -133,3 +133,4 @@ // @ts-expect-error not all choice inputs have a name prop, because this mixin does not have a strict contract with form control mixin
       this.disabled = false;
-      this.__toggleChecked = this.__toggleChecked.bind(this);
+      this._preventDuplicateLabelClick = this._preventDuplicateLabelClick.bind(this);
+      this._toggleChecked = this._toggleChecked.bind(this);
     }
@@ -195,3 +196,6 @@
       super.connectedCallback();
-      this.addEventListener('user-input-changed', this.__toggleChecked);
+      if (this._labelNode) {
+        this._labelNode.addEventListener('click', this._preventDuplicateLabelClick);
+      }
+      this.addEventListener('user-input-changed', this._toggleChecked);
     }
@@ -201,6 +205,28 @@
       super.disconnectedCallback();
-      this.removeEventListener('user-input-changed', this.__toggleChecked);
+      if (this._labelNode) {
+        this._labelNode.removeEventListener('click', this._preventDuplicateLabelClick);
+      }
+      this.removeEventListener('user-input-changed', this._toggleChecked);
     }
 
-    __toggleChecked() {
+    /**
+     * The native platform fires an event for both the click on the label, and also
+     * the redispatched click on the native input element.
+     * This results in two click events arriving at the host, but we only want one.
+     * This method prevents the duplicate click and ensures the correct isTrusted event
+     * with the correct event.target arrives at the host.
+     * @param {Event} ev
+     */
+    // eslint-disable-next-line no-unused-vars
+    _preventDuplicateLabelClick(ev) {
+      const __inputClickHandler = /** @param {Event} _ev */ _ev => {
+        _ev.stopImmediatePropagation();
+        this._inputNode.removeEventListener('click', __inputClickHandler);
+      };
+      this._inputNode.addEventListener('click', __inputClickHandler);
+    }
+
+    /** @param {Event} ev */
+    // eslint-disable-next-line no-unused-vars
+    _toggleChecked(ev) {
       if (this.disabled) {
@@ -207,0 +233,0 @@ return;

src/form-group/FormGroupMixin.d.ts

@@ -8,3 +8,3 @@ export type FormGroupMixin = typeof import("../../types/form-group/FormGroupMixinTypes.js").FormGroupImplementation;
 export type FormControl = import("../../types/FormControlMixinTypes.js").FormControlHost & HTMLElement & {
-    __parentFormGroup?: HTMLElement | undefined;
+    _parentFormGroup?: HTMLElement | undefined;
     checked?: boolean | undefined;
@@ -11,0 +11,0 @@ disabled: boolean;

src/form-group/FormGroupMixin.js

@@ -15,3 +15,3 @@ import { dedupeMixin, html, SlotMixin, DisabledMixin } from '@lion/core';
  * @typedef {import('../../types/registration/FormRegistrarMixinTypes').ElementWithParentFormGroup} ElementWithParentFormGroup
- * @typedef {FormControlHost & HTMLElement & {__parentFormGroup?: HTMLElement, checked?: boolean, disabled: boolean, hasFeedbackFor: string[], makeRequestToBeDisabled: Function }} FormControl
+ * @typedef {FormControlHost & HTMLElement & {_parentFormGroup?: HTMLElement, checked?: boolean, disabled: boolean, hasFeedbackFor: string[], makeRequestToBeDisabled: Function }} FormControl
  */
@@ -453,3 +453,3 @@
       const unTypedThis = /** @type {unknown} */ (this);
-      let parent = /** @type {FormControlHost & { __parentFormGroup:any }} */ (unTypedThis);
+      let parent = /** @type {FormControlHost & { _parentFormGroup:any }} */ (unTypedThis);
       const ctor = /** @type {typeof FormGroupMixin} */ (this.constructor);
@@ -459,3 +459,3 @@ while (parent) {
         // Also check if the newly added child needs to refer grandparents
-        parent = parent.__parentFormGroup;
+        parent = parent._parentFormGroup;
       }
@@ -462,0 +462,0 @@ }

src/registration/FormRegisteringMixin.js

@@ -22,3 +22,3 @@ import { dedupeMixin } from '@lion/core';
       /** @type {FormRegistrarHost | undefined} */
-      this.__parentFormGroup = undefined;
+      this._parentFormGroup = undefined;
     }
@@ -46,4 +46,4 @@
       }
-      if (this.__parentFormGroup) {
-        this.__parentFormGroup.removeFormElement(this);
+      if (this._parentFormGroup) {
+        this._parentFormGroup.removeFormElement(this);
       }
@@ -50,0 +50,0 @@ }

src/registration/FormRegistrarMixin.d.ts

@@ -7,4 +7,4 @@ export type FormRegistrarMixin = typeof import("../../types/registration/FormRegistrarMixinTypes.js").FormRegistrarImplementation;
 export type FormControl = import("../../types/FormControlMixinTypes.js").FormControlHost & HTMLElement & {
-    __parentFormGroup?: HTMLElement | undefined;
+    _parentFormGroup?: HTMLElement | undefined;
     checked?: boolean | undefined;
 };

src/registration/FormRegistrarMixin.js

@@ -14,3 +14,3 @@ // eslint-disable-next-line max-classes-per-file
  * @typedef {import('../../types/FormControlMixinTypes').FormControlHost} FormControlHost
- * @typedef {FormControlHost & HTMLElement & {__parentFormGroup?:HTMLElement, checked?:boolean}} FormControl
+ * @typedef {FormControlHost & HTMLElement & {_parentFormGroup?:HTMLElement, checked?:boolean}} FormControl
  */
@@ -81,3 +81,3 @@
       // eslint-disable-next-line no-param-reassign
-      child.__parentFormGroup = this;
+      child._parentFormGroup = this;
 
@@ -84,0 +84,0 @@ // 1. Add children as array element

test/lion-field.test.d.ts

 export type LionField = import("../index.js").LionField;
 export type FormControlHost = import("../types/FormControlMixinTypes.js").FormControlHost;
 export type FormControl = import("../types/FormControlMixinTypes.js").FormControlHost & HTMLElement & {
-    __parentFormGroup?: HTMLElement | undefined;
+    _parentFormGroup?: HTMLElement | undefined;
     checked?: boolean | undefined;
@@ -6,0 +6,0 @@ };

test/lion-field.test.js

@@ -19,3 +19,3 @@ import { unsafeHTML } from '@lion/core';
  * @typedef {import('../types/FormControlMixinTypes').FormControlHost} FormControlHost
- * @typedef {FormControlHost & HTMLElement & {__parentFormGroup?:HTMLElement, checked?:boolean}} FormControl
+ * @typedef {FormControlHost & HTMLElement & {_parentFormGroup?:HTMLElement, checked?:boolean}} FormControl
  */
@@ -22,0 +22,0 @@

types/choice-group/ChoiceInputMixinTypes.d.ts

@@ -44,4 +44,6 @@ import { Constructor } from '@open-wc/dedupe-mixin';
 
-  __toggleChecked(): void;
+  _preventDuplicateLabelClick(ev: Event): void;
 
+  _toggleChecked(ev: Event): void;
+
   __syncModelCheckedToChecked(checked: boolean): void;
@@ -48,0 +50,0 @@

types/registration/FormRegisteringMixinTypes.d.ts

@@ -9,3 +9,3 @@ import { Constructor } from '@open-wc/dedupe-mixin';
   disconnectedCallback(): void;
-  __parentFormGroup?: FormRegistrarHost;
+  _parentFormGroup?: FormRegistrarHost;
 }
@@ -12,0 +12,0 @@

types/registration/FormRegistrarMixinTypes.d.ts

@@ -8,3 +8,3 @@ import { Constructor } from '@open-wc/dedupe-mixin';
 export declare class ElementWithParentFormGroup {
-  __parentFormGroup: FormRegistrarHost;
+  _parentFormGroup: FormRegistrarHost;
 }
@@ -11,0 +11,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

310209

increased by0.49%

Lines of code

7418

increased by0.35%

No dependency changes