@lion/form-core
Advanced tools
Comparing version 0.7.1 to 0.7.2
# 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 @@ |
{ | ||
"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", |
@@ -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; |
@@ -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 @@ */ |
@@ -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; |
@@ -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; |
@@ -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; |
@@ -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 @@ } |
@@ -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 @@ } |
@@ -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; | ||
}; |
@@ -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 |
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 @@ }; |
@@ -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 @@ |
@@ -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 @@ |
@@ -9,3 +9,3 @@ import { Constructor } from '@open-wc/dedupe-mixin'; | ||
disconnectedCallback(): void; | ||
__parentFormGroup?: FormRegistrarHost; | ||
_parentFormGroup?: FormRegistrarHost; | ||
} | ||
@@ -12,0 +12,0 @@ |
@@ -8,3 +8,3 @@ import { Constructor } from '@open-wc/dedupe-mixin'; | ||
export declare class ElementWithParentFormGroup { | ||
__parentFormGroup: FormRegistrarHost; | ||
_parentFormGroup: FormRegistrarHost; | ||
} | ||
@@ -11,0 +11,0 @@ |
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
310209
7418