diff --git a/packages/checkbox-group/src/vaadin-checkbox-group.d.ts b/packages/checkbox-group/src/vaadin-checkbox-group.d.ts index 0908c3eb20..2eee1c2058 100644 --- a/packages/checkbox-group/src/vaadin-checkbox-group.d.ts +++ b/packages/checkbox-group/src/vaadin-checkbox-group.d.ts @@ -14,11 +14,6 @@ import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mix */ export type CheckboxGroupInvalidChangedEvent = CustomEvent<{ value: boolean }>; -/** - * Fired when the `dirty` property changes. - */ -export type CheckboxGroupDirtyChangedEvent = CustomEvent<{ value: boolean }>; - /** * Fired when the `value` property changes. */ @@ -32,8 +27,6 @@ export type CheckboxGroupValidatedEvent = CustomEvent<{ valid: boolean }>; export interface CheckboxGroupCustomEventMap { 'invalid-changed': CheckboxGroupInvalidChangedEvent; - 'dirty-changed': CheckboxGroupDirtyChangedEvent; - 'value-changed': CheckboxGroupValueChangedEvent; validated: CheckboxGroupValidatedEvent; @@ -80,7 +73,6 @@ export interface CheckboxGroupEventMap extends HTMLElementEventMap, CheckboxGrou * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation. * * @fires {CustomEvent} invalid-changed - Fired when the `invalid` property changes. - * @fires {CustomEvent} dirty-changed - Fired when the `dirty` property changes. * @fires {CustomEvent} value-changed - Fired when the `value` property changes. * @fires {CustomEvent} validated - Fired whenever the field is validated. */ @@ -93,15 +85,6 @@ declare class CheckboxGroup extends FieldMixin(FocusMixin(DisabledMixin(ElementM */ value: string[]; - /** - * Whether the field is dirty. - * - * The field is automatically marked as dirty once the user triggers - * a `change` event. Additionally, the field can be manually marked - * as dirty by setting the property to `true`. - */ - dirty: boolean; - addEventListener( type: K, listener: (this: CheckboxGroup, ev: CheckboxGroupEventMap[K]) => void, diff --git a/packages/checkbox-group/src/vaadin-checkbox-group.js b/packages/checkbox-group/src/vaadin-checkbox-group.js index 67c45bf63d..8716104e2e 100644 --- a/packages/checkbox-group/src/vaadin-checkbox-group.js +++ b/packages/checkbox-group/src/vaadin-checkbox-group.js @@ -139,19 +139,6 @@ class CheckboxGroup extends FieldMixin(FocusMixin(DisabledMixin(ElementMixin(The notify: true, observer: '__valueChanged', }, - - /** - * Whether the field is dirty. - * - * The field is automatically marked as dirty once the user triggers - * a `change` event. Additionally, the field can be manually marked - * as dirty by setting the property to `true`. - */ - dirty: { - type: Boolean, - value: false, - notify: true, - }, }; } @@ -160,7 +147,6 @@ class CheckboxGroup extends FieldMixin(FocusMixin(DisabledMixin(ElementMixin(The this.__registerCheckbox = this.__registerCheckbox.bind(this); this.__unregisterCheckbox = this.__unregisterCheckbox.bind(this); - this.__onCheckboxChange = this.__onCheckboxChange.bind(this); this.__onCheckboxCheckedChanged = this.__onCheckboxCheckedChanged.bind(this); } @@ -241,7 +227,6 @@ class CheckboxGroup extends FieldMixin(FocusMixin(DisabledMixin(ElementMixin(The * @private */ __registerCheckbox(checkbox) { - checkbox.addEventListener('change', this.__onCheckboxChange); checkbox.addEventListener('checked-changed', this.__onCheckboxCheckedChanged); if (this.disabled) { @@ -262,7 +247,6 @@ class CheckboxGroup extends FieldMixin(FocusMixin(DisabledMixin(ElementMixin(The * @private */ __unregisterCheckbox(checkbox) { - checkbox.removeEventListener('change', this.__onCheckboxChange); checkbox.removeEventListener('checked-changed', this.__onCheckboxCheckedChanged); if (checkbox.checked) { @@ -316,11 +300,6 @@ class CheckboxGroup extends FieldMixin(FocusMixin(DisabledMixin(ElementMixin(The } } - /** @private */ - __onCheckboxChange() { - this.dirty = true; - } - /** * @param {!CustomEvent} event * @private diff --git a/packages/checkbox-group/test/checkbox-group.test.js b/packages/checkbox-group/test/checkbox-group.test.js index bb55e7474c..67e83ec96e 100644 --- a/packages/checkbox-group/test/checkbox-group.test.js +++ b/packages/checkbox-group/test/checkbox-group.test.js @@ -302,39 +302,6 @@ describe('vaadin-checkbox-group', () => { }); }); - describe('dirty state', () => { - beforeEach(async () => { - group = fixtureSync(` - - - - `); - await nextFrame(); - checkboxes = [...group.querySelectorAll('vaadin-checkbox')]; - }); - - it('should not be dirty by default', () => { - expect(group.dirty).to.be.false; - }); - - it('should not be dirty after programmatic value change', () => { - group.value = ['1']; - expect(group.dirty).to.be.false; - }); - - it('should be dirty after selecting a checkbox', () => { - checkboxes[0].click(); - expect(group.dirty).to.be.true; - }); - - it('should fire dirty-changed event when the state changes', () => { - const spy = sinon.spy(); - group.addEventListener('dirty-changed', spy); - group.dirty = true; - expect(spy.calledOnce).to.be.true; - }); - }); - describe('wrapping', () => { beforeEach(async () => { group = fixtureSync(` diff --git a/packages/checkbox-group/test/typings/checkbox-group.types.ts b/packages/checkbox-group/test/typings/checkbox-group.types.ts index 0adb7273ab..8e8d58cad7 100644 --- a/packages/checkbox-group/test/typings/checkbox-group.types.ts +++ b/packages/checkbox-group/test/typings/checkbox-group.types.ts @@ -1,6 +1,5 @@ import '../../vaadin-checkbox-group.js'; import type { - CheckboxGroupDirtyChangedEvent, CheckboxGroupInvalidChangedEvent, CheckboxGroupValidatedEvent, CheckboxGroupValueChangedEvent, @@ -15,11 +14,6 @@ group.addEventListener('invalid-changed', (event) => { assertType(event.detail.value); }); -group.addEventListener('dirty-changed', (event) => { - assertType(event); - assertType(event.detail.value); -}); - group.addEventListener('value-changed', (event) => { assertType(event); assertType(event.detail.value); diff --git a/packages/checkbox/src/vaadin-checkbox-mixin.js b/packages/checkbox/src/vaadin-checkbox-mixin.js index 35e49afe03..f4ec50a923 100644 --- a/packages/checkbox/src/vaadin-checkbox-mixin.js +++ b/packages/checkbox/src/vaadin-checkbox-mixin.js @@ -103,18 +103,6 @@ export const CheckboxMixin = (superclass) => return super._shouldSetActive(event); } - /** - * Override to mark the field as dirty on change. - * - * @param {Event} event - * @protected - * @override - */ - _onChange(event) { - this.dirty = true; - super._onChange(event); - } - /** * Override method inherited from `CheckedMixin` to reset * `indeterminate` state checkbox is toggled by the user. diff --git a/packages/checkbox/src/vaadin-checkbox.d.ts b/packages/checkbox/src/vaadin-checkbox.d.ts index 77ed349400..e4406856d6 100644 --- a/packages/checkbox/src/vaadin-checkbox.d.ts +++ b/packages/checkbox/src/vaadin-checkbox.d.ts @@ -11,11 +11,6 @@ import { CheckedMixin } from '@vaadin/field-base/src/checked-mixin.js'; import { LabelMixin } from '@vaadin/field-base/src/label-mixin.js'; import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js'; -/** - * Fired when the `dirty` property changes. - */ -export type CheckboxDirtyChangedEvent = CustomEvent<{ value: boolean }>; - /** * Fired when the `checked` property changes. */ @@ -27,8 +22,6 @@ export type CheckboxCheckedChangedEvent = CustomEvent<{ value: boolean }>; export type CheckboxIndeterminateChangedEvent = CustomEvent<{ value: boolean }>; export interface CheckboxCustomEventMap { - 'dirty-changed': CheckboxDirtyChangedEvent; - 'checked-changed': CheckboxCheckedChangedEvent; 'indeterminate-changed': CheckboxIndeterminateChangedEvent; @@ -65,7 +58,6 @@ export interface CheckboxEventMap extends HTMLElementEventMap, CheckboxCustomEve * * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation. * - * @fires {CustomEvent} dirty-changed - Fired when the `dirty` property changes. * @fires {CustomEvent} checked-changed - Fired when the `checked` property changes. * @fires {CustomEvent} indeterminate-changed - Fired when the `indeterminate` property changes. */ diff --git a/packages/checkbox/test/checkbox.common.js b/packages/checkbox/test/checkbox.common.js index a85a71bce7..293128be43 100644 --- a/packages/checkbox/test/checkbox.common.js +++ b/packages/checkbox/test/checkbox.common.js @@ -236,26 +236,4 @@ describe('checkbox', () => { expect(input.indeterminate).to.be.false; }); }); - - describe('dirty state', () => { - beforeEach(async () => { - checkbox = fixtureSync(``); - await nextRender(); - input = checkbox.inputElement; - }); - - it('should not be dirty by default', () => { - expect(checkbox.dirty).to.be.false; - }); - - it('should not be dirty after changing checked state programmatically', () => { - checkbox.checked = true; - expect(checkbox.dirty).to.be.false; - }); - - it('should be dirty after click', () => { - input.click(); - expect(checkbox.dirty).to.be.true; - }); - }); }); diff --git a/packages/combo-box/src/vaadin-combo-box-light.d.ts b/packages/combo-box/src/vaadin-combo-box-light.d.ts index b975cbef2f..bc1b42c3f4 100644 --- a/packages/combo-box/src/vaadin-combo-box-light.d.ts +++ b/packages/combo-box/src/vaadin-combo-box-light.d.ts @@ -41,11 +41,6 @@ export type ComboBoxLightOpenedChangedEvent = CustomEvent<{ value: boolean }>; */ export type ComboBoxLightInvalidChangedEvent = CustomEvent<{ value: boolean }>; -/** - * Fired when the `dirty` property changes. - */ -export type ComboBoxLightDirtyChangedEvent = CustomEvent<{ value: boolean }>; - /** * Fired when the `value` property changes. */ @@ -77,8 +72,6 @@ export interface ComboBoxLightEventMap extends HTMLElementEventMap { 'invalid-changed': ComboBoxLightInvalidChangedEvent; - 'dirty-changed': ComboBoxLightDirtyChangedEvent; - 'value-changed': ComboBoxLightValueChangedEvent; 'selected-item-changed': ComboBoxLightSelectedItemChangedEvent; @@ -129,7 +122,6 @@ export interface ComboBoxLightEventMap extends HTMLElementEventMap { * @fires {CustomEvent} invalid-changed - Fired when the `invalid` property changes. * @fires {CustomEvent} opened-changed - Fired when the `opened` property changes. * @fires {CustomEvent} selected-item-changed - Fired when the `selectedItem` property changes. - * @fires {CustomEvent} dirty-changed - Fired when the `dirty` property changes. * @fires {CustomEvent} value-changed - Fired when the `value` property changes. * @fires {CustomEvent} validated - Fired whenever the field is validated. */ diff --git a/packages/combo-box/src/vaadin-combo-box-mixin.js b/packages/combo-box/src/vaadin-combo-box-mixin.js index f3f746a1da..eda6dfa814 100644 --- a/packages/combo-box/src/vaadin-combo-box-mixin.js +++ b/packages/combo-box/src/vaadin-combo-box-mixin.js @@ -1087,18 +1087,13 @@ export const ComboBoxMixin = (subclass) => /** @private */ _detectAndDispatchChange() { - const isValueChanged = this.value !== this._lastCommittedValue; - if (isValueChanged) { - this.dirty = true; - } - // Do not validate when focusout is caused by document // losing focus, which happens on browser tab switch. if (document.hasFocus()) { this.validate(); } - if (isValueChanged) { + if (this.value !== this._lastCommittedValue) { this.dispatchEvent(new CustomEvent('change', { bubbles: true })); this._lastCommittedValue = this.value; } diff --git a/packages/combo-box/src/vaadin-combo-box.d.ts b/packages/combo-box/src/vaadin-combo-box.d.ts index 0dd16e89f2..8f334874cf 100644 --- a/packages/combo-box/src/vaadin-combo-box.d.ts +++ b/packages/combo-box/src/vaadin-combo-box.d.ts @@ -53,11 +53,6 @@ export type ComboBoxOpenedChangedEvent = CustomEvent<{ value: boolean }>; */ export type ComboBoxInvalidChangedEvent = CustomEvent<{ value: boolean }>; -/** - * Fired when the `dirty` property changes. - */ -export type ComboBoxDirtyChangedEvent = CustomEvent<{ value: boolean }>; - /** * Fired when the `value` property changes. */ @@ -89,8 +84,6 @@ export interface ComboBoxEventMap extends HTMLElementEventMap { 'invalid-changed': ComboBoxInvalidChangedEvent; - 'dirty-changed': ComboBoxDirtyChangedEvent; - 'value-changed': ComboBoxValueChangedEvent; 'selected-item-changed': ComboBoxSelectedItemChangedEvent; @@ -219,7 +212,6 @@ export interface ComboBoxEventMap extends HTMLElementEventMap { * @fires {CustomEvent} filter-changed - Fired when the `filter` property changes. * @fires {CustomEvent} invalid-changed - Fired when the `invalid` property changes. * @fires {CustomEvent} opened-changed - Fired when the `opened` property changes. - * @fires {CustomEvent} dirty-changed - Fired when the `dirty` property changes. * @fires {CustomEvent} selected-item-changed - Fired when the `selectedItem` property changes. * @fires {CustomEvent} value-changed - Fired when the `value` property changes. * @fires {CustomEvent} validated - Fired whenever the field is validated. diff --git a/packages/combo-box/test/dirty-state.test.js b/packages/combo-box/test/dirty-state.test.js deleted file mode 100644 index dadefa7b1f..0000000000 --- a/packages/combo-box/test/dirty-state.test.js +++ /dev/null @@ -1,79 +0,0 @@ -import { expect } from '@esm-bundle/chai'; -import { fire, fixtureSync, outsideClick } from '@vaadin/testing-helpers'; -import { sendKeys } from '@web/test-runner-commands'; -import '../src/vaadin-combo-box.js'; -import { getAllItems } from './helpers.js'; - -describe('dirty state', () => { - let comboBox; - - beforeEach(() => { - comboBox = fixtureSync(''); - comboBox.items = ['Item 1', 'Item 2', 'Item 3']; - }); - - it('should not be dirty by default', () => { - expect(comboBox.dirty).to.be.false; - }); - - it('should not be dirty after programmatic value change', async () => { - comboBox.value = 'Item 1'; - expect(comboBox.dirty).to.be.false; - }); - - it('should not be dirty after blur without change', () => { - comboBox.focus(); - comboBox.blur(); - expect(comboBox.dirty).to.be.false; - }); - - it('should not be dirty after pressing Enter without change', async () => { - comboBox.focus(); - await sendKeys({ press: 'Enter' }); - expect(comboBox.dirty).to.be.false; - }); - - it('should not be dirty after closing the dropdown without change', async () => { - comboBox.focus(); - comboBox.click(); - outsideClick(); - expect(comboBox.dirty).to.be.false; - }); - - it('should not be dirty after cancelling selection and closing the dropdown', async () => { - comboBox.focus(); - comboBox.click(); - await sendKeys({ press: 'ArrowDown' }); - await sendKeys({ press: 'Escape' }); - await sendKeys({ press: 'Escape' }); - expect(comboBox.dirty).to.be.false; - }); - - it('should be dirty after user input', async () => { - comboBox.focus(); - await sendKeys({ type: 'I' }); - expect(comboBox.dirty).to.be.true; - }); - - it('should be dirty after selecting a dropdown item with click', () => { - comboBox.focus(); - comboBox.click(); - getAllItems(comboBox)[0].click(); - expect(comboBox.dirty).to.be.true; - }); - - it('should be dirty after selecting a dropdown item with Enter', async () => { - comboBox.focus(); - comboBox.click(); - await sendKeys({ press: 'ArrowDown' }); - await sendKeys({ press: 'Enter' }); - expect(comboBox.dirty).to.be.true; - }); - - it('should be dirty after clear button click', () => { - comboBox.clearButtonVisible = true; - comboBox.value = 'foo'; - comboBox.$.clearButton.click(); - expect(comboBox.dirty).to.be.true; - }); -}); diff --git a/packages/combo-box/test/typings/combo-box.types.ts b/packages/combo-box/test/typings/combo-box.types.ts index a30b40e223..15802d40e7 100644 --- a/packages/combo-box/test/typings/combo-box.types.ts +++ b/packages/combo-box/test/typings/combo-box.types.ts @@ -24,7 +24,6 @@ import type { ComboBox, ComboBoxChangeEvent, ComboBoxCustomValueSetEvent, - ComboBoxDirtyChangedEvent, ComboBoxFilterChangedEvent, ComboBoxInvalidChangedEvent, ComboBoxOpenedChangedEvent, @@ -37,7 +36,6 @@ import type { ComboBoxLight, ComboBoxLightChangeEvent, ComboBoxLightCustomValueSetEvent, - ComboBoxLightDirtyChangedEvent, ComboBoxLightFilterChangedEvent, ComboBoxLightInvalidChangedEvent, ComboBoxLightOpenedChangedEvent, @@ -78,11 +76,6 @@ narrowedComboBox.addEventListener('invalid-changed', (event) => { assertType(event.detail.value); }); -narrowedComboBox.addEventListener('dirty-changed', (event) => { - assertType(event); - assertType(event.detail.value); -}); - narrowedComboBox.addEventListener('value-changed', (event) => { assertType(event); assertType(event.detail.value); @@ -185,11 +178,6 @@ narrowedComboBoxLight.addEventListener('invalid-changed', (event) => { assertType(event.detail.value); }); -narrowedComboBoxLight.addEventListener('dirty-changed', (event) => { - assertType(event); - assertType(event.detail.value); -}); - narrowedComboBoxLight.addEventListener('value-changed', (event) => { assertType(event); assertType(event.detail.value); diff --git a/packages/custom-field/src/vaadin-custom-field-mixin.js b/packages/custom-field/src/vaadin-custom-field-mixin.js index 68c228dc6e..9fc5ed9440 100644 --- a/packages/custom-field/src/vaadin-custom-field-mixin.js +++ b/packages/custom-field/src/vaadin-custom-field-mixin.js @@ -105,19 +105,6 @@ export const CustomFieldMixin = (superClass) => parseValue: { type: Function, }, - - /** - * Whether the field is dirty. - * - * The field is automatically marked as dirty once the user triggers - * an `input` or `change` event. Additionally, the field can be manually - * marked as dirty by setting the property to `true`. - */ - dirty: { - type: Boolean, - value: false, - notify: true, - }, }; } @@ -223,15 +210,9 @@ export const CustomFieldMixin = (superClass) => } /** @protected */ - _onInput() { - this.dirty = true; - } - - /** @protected */ - _onChange(event) { + _onInputChange(event) { // Stop native change events event.stopPropagation(); - this.dirty = true; this.__setValue(); this.validate(); diff --git a/packages/custom-field/src/vaadin-custom-field.js b/packages/custom-field/src/vaadin-custom-field.js index 9586222671..3dd06f24a9 100644 --- a/packages/custom-field/src/vaadin-custom-field.js +++ b/packages/custom-field/src/vaadin-custom-field.js @@ -72,7 +72,7 @@ class CustomField extends CustomFieldMixin(ThemableMixin(ElementMixin(PolymerEle -
+
diff --git a/packages/custom-field/src/vaadin-lit-custom-field.js b/packages/custom-field/src/vaadin-lit-custom-field.js index 7b3345d116..8934553467 100644 --- a/packages/custom-field/src/vaadin-lit-custom-field.js +++ b/packages/custom-field/src/vaadin-lit-custom-field.js @@ -37,7 +37,7 @@ class CustomField extends CustomFieldMixin(ThemableMixin(ElementMixin(PolylitMix
-
+
diff --git a/packages/custom-field/test/custom-field.common.js b/packages/custom-field/test/custom-field.common.js index 5788a4b49c..e12df3a439 100644 --- a/packages/custom-field/test/custom-field.common.js +++ b/packages/custom-field/test/custom-field.common.js @@ -148,31 +148,4 @@ describe('custom field', () => { }); }); }); - - describe('dirty state', () => { - let input; - - beforeEach(() => { - input = customField.querySelector('input'); - }); - - it('should not be dirty by default', () => { - expect(customField.dirty).to.be.false; - }); - - it('should not be dirty after programmatic value change', async () => { - customField.value = 'foo,1'; - expect(customField.dirty).to.be.false; - }); - - it('should be dirty after sub-field input', async () => { - fire(input, 'input'); - expect(customField.dirty).to.be.true; - }); - - it('should be dirty after sub-field change', async () => { - fire(input, 'change'); - expect(customField.dirty).to.be.true; - }); - }); }); diff --git a/packages/date-picker/src/vaadin-date-picker-light.d.ts b/packages/date-picker/src/vaadin-date-picker-light.d.ts index eb099ccbba..c148f88d86 100644 --- a/packages/date-picker/src/vaadin-date-picker-light.d.ts +++ b/packages/date-picker/src/vaadin-date-picker-light.d.ts @@ -25,11 +25,6 @@ export type DatePickerLightOpenedChangedEvent = CustomEvent<{ value: boolean }>; */ export type DatePickerLightInvalidChangedEvent = CustomEvent<{ value: boolean }>; -/** - * Fired when the `dirty` property changes. - */ -export type DatePickerLightDirtyChangedEvent = CustomEvent<{ value: boolean }>; - /** * Fired when the `value` property changes. */ @@ -45,8 +40,6 @@ export interface DatePickerLightCustomEventMap { 'invalid-changed': DatePickerLightInvalidChangedEvent; - 'dirty-changed': DatePickerLightDirtyChangedEvent; - 'value-changed': DatePickerLightValueChangedEvent; validated: DatePickerLightValidatedEvent; @@ -87,7 +80,6 @@ export interface DatePickerLightEventMap extends HTMLElementEventMap, DatePicker * * @fires {Event} change - Fired when the user commits a value change. * @fires {CustomEvent} opened-changed - Fired when the `opened` property changes. - * @fires {CustomEvent} dirty-changed - Fired when the `dirty` property changes. * @fires {CustomEvent} value-changed - Fired when the `value` property changes. * @fires {CustomEvent} validated - Fired whenever the field is validated. */ diff --git a/packages/date-picker/src/vaadin-date-picker-mixin.js b/packages/date-picker/src/vaadin-date-picker-mixin.js index af3721541d..4aef26183c 100644 --- a/packages/date-picker/src/vaadin-date-picker-mixin.js +++ b/packages/date-picker/src/vaadin-date-picker-mixin.js @@ -669,7 +669,6 @@ export const DatePickerMixin = (subclass) => this._selectedDate = dateToSelect; if (prevValue !== this.value) { - this.dirty = true; this.__dispatchChange(); } } @@ -1020,7 +1019,6 @@ export const DatePickerMixin = (subclass) => */ _onClearButtonClick(event) { event.preventDefault(); - this.dirty = true; this._inputElementValue = ''; this.value = ''; this.__dispatchChange(); diff --git a/packages/date-picker/src/vaadin-date-picker.d.ts b/packages/date-picker/src/vaadin-date-picker.d.ts index 1b398d9de7..960f7b5d94 100644 --- a/packages/date-picker/src/vaadin-date-picker.d.ts +++ b/packages/date-picker/src/vaadin-date-picker.d.ts @@ -26,11 +26,6 @@ export type DatePickerOpenedChangedEvent = CustomEvent<{ value: boolean }>; */ export type DatePickerInvalidChangedEvent = CustomEvent<{ value: boolean }>; -/** - * Fired when the `dirty` property changes. - */ -export type DatePickerDirtyChangedEvent = CustomEvent<{ value: boolean }>; - /** * Fired when the `value` property changes. */ @@ -46,8 +41,6 @@ export interface DatePickerCustomEventMap { 'invalid-changed': DatePickerInvalidChangedEvent; - 'dirty-changed': DatePickerDirtyChangedEvent; - 'value-changed': DatePickerValueChangedEvent; validated: DatePickerValidatedEvent; @@ -158,7 +151,6 @@ export interface DatePickerEventMap extends HTMLElementEventMap, DatePickerCusto * @fires {Event} change - Fired when the user commits a value change. * @fires {CustomEvent} invalid-changed - Fired when the `invalid` property changes. * @fires {CustomEvent} opened-changed - Fired when the `opened` property changes. - * @fires {CustomEvent} dirty-changed - Fired when the `dirty` property changes. * @fires {CustomEvent} value-changed - Fired when the `value` property changes. * @fires {CustomEvent} validated - Fired whenever the field is validated. */ diff --git a/packages/date-picker/test/dirty-state.test.js b/packages/date-picker/test/dirty-state.test.js deleted file mode 100644 index d43dad78bc..0000000000 --- a/packages/date-picker/test/dirty-state.test.js +++ /dev/null @@ -1,86 +0,0 @@ -import { expect } from '@esm-bundle/chai'; -import { fixtureSync, nextRender, outsideClick, tap } from '@vaadin/testing-helpers'; -import { sendKeys } from '@web/test-runner-commands'; -import '../src/vaadin-date-picker.js'; -import { getFocusedCell, waitForOverlayRender, waitForScrollToFinish } from './helpers.js'; - -describe('dirty state', () => { - let datePicker; - - beforeEach(async () => { - datePicker = fixtureSync(''); - await nextRender(); - }); - - it('should not be dirty by default', () => { - expect(datePicker.dirty).to.be.false; - }); - - it('should not be dirty after programmatic value change', async () => { - datePicker.value = '2023-01-01'; - expect(datePicker.dirty).to.be.false; - }); - - it('should not be dirty after blur without change', () => { - datePicker.focus(); - datePicker.blur(); - expect(datePicker.dirty).to.be.false; - }); - - it('should not be dirty after outside click without change', async () => { - datePicker.focus(); - datePicker.click(); - await waitForOverlayRender(); - outsideClick(); - expect(datePicker.dirty).to.be.false; - }); - - it('should not be dirty after pressing Enter without change', async () => { - datePicker.focus(); - await sendKeys({ press: 'Enter' }); - expect(datePicker.dirty).to.be.false; - }); - - it('should not be dirty after cancelling selection and closing the dropdown', async () => { - datePicker.focus(); - datePicker.click(); - await waitForOverlayRender(); - await sendKeys({ press: 'ArrowDown' }); - await waitForScrollToFinish(datePicker._overlayContent); - await sendKeys({ press: 'Escape' }); - expect(datePicker.dirty).to.be.false; - }); - - it('should be dirty after user input', async () => { - datePicker.focus(); - await sendKeys({ type: '1' }); - await waitForOverlayRender(); - expect(datePicker.dirty).to.be.true; - }); - - it('should be dirty after selecting a dropdown item with click', async () => { - datePicker.focus(); - datePicker.click(); - await waitForOverlayRender(); - const date = getFocusedCell(datePicker._overlayContent); - tap(date); - expect(datePicker.dirty).to.be.true; - }); - - it('should be dirty after selecting a dropdown item with Enter', async () => { - datePicker.focus(); - datePicker.click(); - await waitForOverlayRender(); - await sendKeys({ press: 'ArrowDown' }); - await waitForScrollToFinish(datePicker._overlayContent); - await sendKeys({ press: 'Enter' }); - expect(datePicker.dirty).to.be.true; - }); - - it('should be dirty after clear button click', () => { - datePicker.clearButtonVisible = true; - datePicker.value = '2023-01-01'; - datePicker.$.clearButton.click(); - expect(datePicker.dirty).to.be.true; - }); -}); diff --git a/packages/date-picker/test/typings/date-picker.types.ts b/packages/date-picker/test/typings/date-picker.types.ts index bb67a97c8c..e317ba7b9e 100644 --- a/packages/date-picker/test/typings/date-picker.types.ts +++ b/packages/date-picker/test/typings/date-picker.types.ts @@ -17,7 +17,6 @@ import type { DatePickerMixinClass } from '../../src/vaadin-date-picker-mixin.js import type { DatePicker, DatePickerChangeEvent, - DatePickerDirtyChangedEvent, DatePickerInvalidChangedEvent, DatePickerOpenedChangedEvent, DatePickerValidatedEvent, @@ -26,7 +25,6 @@ import type { import type { DatePickerLight, DatePickerLightChangeEvent, - DatePickerLightDirtyChangedEvent, DatePickerLightInvalidChangedEvent, DatePickerLightOpenedChangedEvent, DatePickerLightValidatedEvent, @@ -49,11 +47,6 @@ datePicker.addEventListener('invalid-changed', (event) => { assertType(event.detail.value); }); -datePicker.addEventListener('dirty-changed', (event) => { - assertType(event); - assertType(event.detail.value); -}); - datePicker.addEventListener('value-changed', (event) => { assertType(event); assertType(event.detail.value); @@ -133,11 +126,6 @@ datePickerLight.addEventListener('value-changed', (event) => { assertType(event.detail.value); }); -datePickerLight.addEventListener('dirty-changed', (event) => { - assertType(event); - assertType(event.detail.value); -}); - datePickerLight.addEventListener('change', (event) => { assertType(event); assertType(event.target); diff --git a/packages/date-time-picker/src/vaadin-date-time-picker.d.ts b/packages/date-time-picker/src/vaadin-date-time-picker.d.ts index 90f2740ce6..e782451c71 100644 --- a/packages/date-time-picker/src/vaadin-date-time-picker.d.ts +++ b/packages/date-time-picker/src/vaadin-date-time-picker.d.ts @@ -39,11 +39,6 @@ export type DateTimePickerChangeEvent = Event & { */ export type DateTimePickerInvalidChangedEvent = CustomEvent<{ value: boolean }>; -/** - * Fired when the `dirty` property changes. - */ -export type DateTimePickerDirtyChangedEvent = CustomEvent<{ value: boolean }>; - /** * Fired when the `value` property changes. */ @@ -57,8 +52,6 @@ export type DateTimePickerValidatedEvent = CustomEvent<{ valid: boolean }>; export interface DateTimePickerCustomEventMap { 'invalid-changed': DateTimePickerInvalidChangedEvent; - 'dirty-changed': DateTimePickerDirtyChangedEvent; - 'value-changed': DateTimePickerValueChangedEvent; validated: DateTimePickerValidatedEvent; @@ -120,7 +113,6 @@ export interface DateTimePickerEventMap extends DateTimePickerCustomEventMap, HT * * @fires {Event} change - Fired when the user commits a value change. * @fires {CustomEvent} invalid-changed - Fired when the `invalid` property changes. - * @fires {CustomEvent} dirty-changed - Fired when the `dirty` property changes. * @fires {CustomEvent} value-changed - Fired when the `value` property changes. * @fires {CustomEvent} validated - Fired whenever the field is validated. */ @@ -222,15 +214,6 @@ declare class DateTimePicker extends FieldMixin(DisabledMixin(FocusMixin(Themabl */ autofocus: boolean; - /** - * Whether the field is dirty. - * - * The field is automatically marked as dirty once the user triggers - * an `input` or `change` event on the child pickers. Additionally, the field - * can be manually marked as dirty by setting the property to `true`. - */ - dirty: boolean; - /** * The object used to localize this component. * To change the default localization, replace the entire diff --git a/packages/date-time-picker/src/vaadin-date-time-picker.js b/packages/date-time-picker/src/vaadin-date-time-picker.js index de2764927d..3c2cb687f9 100644 --- a/packages/date-time-picker/src/vaadin-date-time-picker.js +++ b/packages/date-time-picker/src/vaadin-date-time-picker.js @@ -322,19 +322,6 @@ class DateTimePicker extends FieldMixin(DisabledMixin(FocusMixin(ThemableMixin(E type: Boolean, }, - /** - * Whether the field is dirty. - * - * The field is automatically marked as dirty once the user triggers - * an `input` or `change` event on the child pickers. Additionally, the field - * can be manually marked as dirty by setting the property to `true`. - */ - dirty: { - type: Boolean, - value: false, - notify: true, - }, - /** * The current selected date time. * @private @@ -422,7 +409,6 @@ class DateTimePicker extends FieldMixin(DisabledMixin(FocusMixin(ThemableMixin(E this.__defaultTimeMaxValue = '23:59:59.999'; this.__changeEventHandler = this.__changeEventHandler.bind(this); - this.__dirtyChangedEventHandler = this.__dirtyChangedEventHandler.bind(this); this.__valueChangedEventHandler = this.__valueChangedEventHandler.bind(this); } @@ -530,24 +516,15 @@ class DateTimePicker extends FieldMixin(DisabledMixin(FocusMixin(ThemableMixin(E this.__dispatchChangeForValue = undefined; } - /** @private */ - __dirtyChangedEventHandler(event) { - if (event.detail.value) { - this.dirty = true; - } - } - /** @private */ __addInputListeners(node) { node.addEventListener('change', this.__changeEventHandler); - node.addEventListener('dirty-changed', this.__dirtyChangedEventHandler); node.addEventListener('value-changed', this.__valueChangedEventHandler); } /** @private */ __removeInputListeners(node) { node.removeEventListener('change', this.__changeEventHandler); - node.removeEventListener('dirty-changed', this.__dirtyChangedEventHandler); node.removeEventListener('value-changed', this.__valueChangedEventHandler); } diff --git a/packages/date-time-picker/test/dirty-state.test.js b/packages/date-time-picker/test/dirty-state.test.js deleted file mode 100644 index c0e18854e1..0000000000 --- a/packages/date-time-picker/test/dirty-state.test.js +++ /dev/null @@ -1,86 +0,0 @@ -import { expect } from '@esm-bundle/chai'; -import { fire, fixtureSync, nextRender } from '@vaadin/testing-helpers'; -import { sendKeys } from '@web/test-runner-commands'; -import sinon from 'sinon'; -import '../src/vaadin-date-time-picker.js'; -import { waitForOverlayRender } from '@vaadin/date-picker/test/helpers.js'; - -describe('dirty state', () => { - let dateTimePicker, datePicker, timePicker; - - const fixtures = { - default: '', - slotted: ` - - - - - `, - }; - - ['default', 'slotted'].forEach((type) => { - describe(type, () => { - beforeEach(async () => { - dateTimePicker = fixtureSync(fixtures[type]); - await nextRender(); - datePicker = dateTimePicker.querySelector('[slot=date-picker]'); - timePicker = dateTimePicker.querySelector('[slot=time-picker]'); - }); - - it('should not be dirty by default', () => { - expect(dateTimePicker.dirty).to.be.false; - }); - - it('should not be dirty after programmatic value change', async () => { - dateTimePicker.value = '2023-01-01T00:00'; - expect(dateTimePicker.dirty).to.be.false; - }); - - it('should not be dirty after date-picker blur without change', () => { - datePicker.focus(); - datePicker.blur(); - expect(dateTimePicker.dirty).to.be.false; - }); - - it('should not be dirty after time-picker blur without change', () => { - timePicker.focus(); - timePicker.blur(); - expect(dateTimePicker.dirty).to.be.false; - }); - - it('should be dirty after date-picker change', async () => { - datePicker.focus(); - datePicker.click(); - await waitForOverlayRender(); - await sendKeys({ press: 'ArrowDown' }); - await sendKeys({ press: 'Enter' }); - expect(dateTimePicker.dirty).to.be.true; - }); - - it('should be dirty after time-picker change', async () => { - timePicker.focus(); - timePicker.click(); - await sendKeys({ press: 'ArrowDown' }); - await sendKeys({ press: 'Enter' }); - expect(dateTimePicker.dirty).to.be.true; - }); - - it('should be dirty after time-picker user input', () => { - fire(timePicker.inputElement, 'input'); - expect(dateTimePicker.dirty).to.be.true; - }); - - it('should be dirty after date-picker user input', () => { - fire(datePicker.inputElement, 'input'); - expect(dateTimePicker.dirty).to.be.true; - }); - - it('should fire dirty-changed event when the state changes', () => { - const spy = sinon.spy(); - dateTimePicker.addEventListener('dirty-changed', spy); - dateTimePicker.dirty = true; - expect(spy.calledOnce).to.be.true; - }); - }); - }); -}); diff --git a/packages/date-time-picker/test/typings/date-time-picker.types.ts b/packages/date-time-picker/test/typings/date-time-picker.types.ts index 75bd828aaf..01414c1ac1 100644 --- a/packages/date-time-picker/test/typings/date-time-picker.types.ts +++ b/packages/date-time-picker/test/typings/date-time-picker.types.ts @@ -2,7 +2,6 @@ import '../../vaadin-date-time-picker.js'; import type { DateTimePicker, DateTimePickerChangeEvent, - DateTimePickerDirtyChangedEvent, DateTimePickerInvalidChangedEvent, DateTimePickerValidatedEvent, DateTimePickerValueChangedEvent, @@ -22,11 +21,6 @@ picker.addEventListener('invalid-changed', (event) => { assertType(event.detail.value); }); -picker.addEventListener('dirty-changed', (event) => { - assertType(event); - assertType(event.detail.value); -}); - picker.addEventListener('value-changed', (event) => { assertType(event); assertType(event.detail.value); diff --git a/packages/email-field/src/vaadin-email-field.d.ts b/packages/email-field/src/vaadin-email-field.d.ts index dab249da04..df4a3c806a 100644 --- a/packages/email-field/src/vaadin-email-field.d.ts +++ b/packages/email-field/src/vaadin-email-field.d.ts @@ -17,11 +17,6 @@ export type EmailFieldChangeEvent = Event & { */ export type EmailFieldInvalidChangedEvent = CustomEvent<{ value: boolean }>; -/** - * Fired when the `dirty` property changes. - */ -export type EmailFieldDirtyChangedEvent = CustomEvent<{ value: boolean }>; - /** * Fired when the `value` property changes. */ @@ -35,8 +30,6 @@ export type EmailFieldValidatedEvent = CustomEvent<{ valid: boolean }>; export interface EmailFieldCustomEventMap { 'invalid-changed': EmailFieldInvalidChangedEvent; - 'dirty-changed': EmailFieldDirtyChangedEvent; - 'value-changed': EmailFieldValueChangedEvent; validated: EmailFieldValidatedEvent; @@ -63,7 +56,6 @@ export interface EmailFieldEventMap extends HTMLElementEventMap, EmailFieldCusto * @fires {Event} input - Fired when the value is changed by the user: on every typing keystroke, and the value is cleared using the clear button. * @fires {Event} change - Fired when the user commits a value change. * @fires {CustomEvent} invalid-changed - Fired when the `invalid` property changes. - * @fires {CustomEvent} dirty-changed - Fired when the `dirty` property changes. * @fires {CustomEvent} value-changed - Fired when the `value` property changes. * @fires {CustomEvent} validated - Fired whenever the field is validated. */ diff --git a/packages/email-field/test/typings/email-field.types.ts b/packages/email-field/test/typings/email-field.types.ts index 5f6f5cebdd..3ee114bb31 100644 --- a/packages/email-field/test/typings/email-field.types.ts +++ b/packages/email-field/test/typings/email-field.types.ts @@ -2,7 +2,6 @@ import '../../vaadin-email-field.js'; import type { EmailField, EmailFieldChangeEvent, - EmailFieldDirtyChangedEvent, EmailFieldInvalidChangedEvent, EmailFieldValidatedEvent, EmailFieldValueChangedEvent, @@ -22,11 +21,6 @@ field.addEventListener('invalid-changed', (event) => { assertType(event.detail.value); }); -field.addEventListener('dirty-changed', (event) => { - assertType(event); - assertType(event.detail.value); -}); - field.addEventListener('value-changed', (event) => { assertType(event); assertType(event.detail.value); diff --git a/packages/field-base/src/input-mixin.d.ts b/packages/field-base/src/input-mixin.d.ts index 07503fec1b..be002a0093 100644 --- a/packages/field-base/src/input-mixin.d.ts +++ b/packages/field-base/src/input-mixin.d.ts @@ -28,15 +28,6 @@ export declare class InputMixinClass { */ value: string; - /** - * Whether the field is dirty. - * - * The field is automatically marked as dirty once the user triggers - * an `input` or `change` event. Additionally, the field can be manually - * marked as dirty by setting the property to `true`. - */ - dirty: boolean; - /** * Indicates whether the value is different from the default one. * Override if the `value` property has a type other than `string`. diff --git a/packages/field-base/src/input-mixin.js b/packages/field-base/src/input-mixin.js index f36fd90a6f..9fbb19cb16 100644 --- a/packages/field-base/src/input-mixin.js +++ b/packages/field-base/src/input-mixin.js @@ -53,19 +53,6 @@ export const InputMixin = dedupingMixin( notify: true, }, - /** - * Whether the field is dirty. - * - * The field is automatically marked as dirty once the user triggers - * an `input` or `change` event. Additionally, the field can be manually - * marked as dirty by setting the property to `true`. - */ - dirty: { - type: Boolean, - value: false, - notify: true, - }, - /** * Whether the input element has a non-empty value. * @@ -207,7 +194,7 @@ export const InputMixin = dedupingMixin( } /** - * An input event listener used to update `_hasInputValue` and `dirty` properties. + * An input event listener used to update `_hasInputValue` property. * Do not override this method. * * @param {Event} event @@ -215,7 +202,6 @@ export const InputMixin = dedupingMixin( */ __onInput(event) { this._setHasInputValue(event); - this.dirty = true; this._onInput(event); } diff --git a/packages/field-base/test/clear-button-mixin.test.js b/packages/field-base/test/clear-button-mixin.test.js index 55d7529d1a..6b3ddca61b 100644 --- a/packages/field-base/test/clear-button-mixin.test.js +++ b/packages/field-base/test/clear-button-mixin.test.js @@ -65,12 +65,6 @@ const runTests = (defineHelper, baseMixin) => { expect(input.value).to.equal(''); }); - it('should mark the field as dirty on clear button click', async () => { - clearButton.click(); - await nextUpdate(element); - expect(element.dirty).to.be.true; - }); - (!isTouch ? it : it.skip)('should focus the input on clear button mousedown', () => { const spy = sinon.spy(input, 'focus'); mousedown(clearButton); diff --git a/packages/field-base/test/input-mixin.test.js b/packages/field-base/test/input-mixin.test.js index d3e27c0fa5..65651b5b22 100644 --- a/packages/field-base/test/input-mixin.test.js +++ b/packages/field-base/test/input-mixin.test.js @@ -113,41 +113,6 @@ const runTests = (defineHelper, baseMixin) => { }); }); - describe('dirty state', () => { - beforeEach(async () => { - element = fixtureSync(`<${tag}>`); - await nextRender(); - input = document.createElement('input'); - input.setAttribute('slot', 'input'); - element.appendChild(input); - element._setInputElement(input); - await nextUpdate(); - }); - - it('should not be dirty by default', () => { - expect(element.dirty).to.be.false; - }); - - it('should not be dirty after programmatic value change', async () => { - element.value = 'foo'; - await nextUpdate(element); - expect(element.dirty).to.be.false; - }); - - it('should be dirty after user input', () => { - fire(input, 'input'); - expect(element.dirty).to.be.true; - }); - - it('should fire dirty-changed event when the state changes', async () => { - const spy = sinon.spy(); - element.addEventListener('dirty-changed', spy); - element.dirty = true; - await nextUpdate(); - expect(spy.calledOnce).to.be.true; - }); - }); - describe('events', () => { let eventsTag, inputSpy, changeSpy; diff --git a/packages/integer-field/src/vaadin-integer-field.d.ts b/packages/integer-field/src/vaadin-integer-field.d.ts index 25d2553fa3..e5568f4537 100644 --- a/packages/integer-field/src/vaadin-integer-field.d.ts +++ b/packages/integer-field/src/vaadin-integer-field.d.ts @@ -17,11 +17,6 @@ export type IntegerFieldChangeEvent = Event & { */ export type IntegerFieldInvalidChangedEvent = CustomEvent<{ value: boolean }>; -/** - * Fired when the `dirty` property changes. - */ -export type IntegerFieldDirtyChangedEvent = CustomEvent<{ value: boolean }>; - /** * Fired when the `value` property changes. */ @@ -35,8 +30,6 @@ export type IntegerFieldValidatedEvent = CustomEvent<{ valid: boolean }>; export interface IntegerFieldCustomEventMap { 'invalid-changed': IntegerFieldInvalidChangedEvent; - 'dirty-changed': IntegerFieldDirtyChangedEvent; - 'value-changed': IntegerFieldValueChangedEvent; validated: IntegerFieldValidatedEvent; @@ -70,7 +63,6 @@ export interface IntegerFieldEventMap extends HTMLElementEventMap, IntegerFieldC * @fires {Event} input - Fired when the value is changed by the user: on every typing keystroke, and the value is cleared using the clear button. * @fires {Event} change - Fired when the user commits a value change. * @fires {CustomEvent} invalid-changed - Fired when the `invalid` property changes. - * @fires {CustomEvent} dirty-changed - Fired when the `dirty` property changes. * @fires {CustomEvent} value-changed - Fired when the `value` property changes. * @fires {CustomEvent} validated - Fired whenever the field is validated. */ diff --git a/packages/integer-field/test/typings/integer-field.types.ts b/packages/integer-field/test/typings/integer-field.types.ts index 7802aeeed2..ec01a74782 100644 --- a/packages/integer-field/test/typings/integer-field.types.ts +++ b/packages/integer-field/test/typings/integer-field.types.ts @@ -2,7 +2,6 @@ import '../../vaadin-integer-field.js'; import type { IntegerField, IntegerFieldChangeEvent, - IntegerFieldDirtyChangedEvent, IntegerFieldInvalidChangedEvent, IntegerFieldValidatedEvent, IntegerFieldValueChangedEvent, @@ -22,11 +21,6 @@ field.addEventListener('invalid-changed', (event) => { assertType(event.detail.value); }); -field.addEventListener('dirty-changed', (event) => { - assertType(event); - assertType(event.detail.value); -}); - field.addEventListener('value-changed', (event) => { assertType(event); assertType(event.detail.value); diff --git a/packages/multi-select-combo-box/src/vaadin-multi-select-combo-box.d.ts b/packages/multi-select-combo-box/src/vaadin-multi-select-combo-box.d.ts index dd3afe4312..010a7afe52 100644 --- a/packages/multi-select-combo-box/src/vaadin-multi-select-combo-box.d.ts +++ b/packages/multi-select-combo-box/src/vaadin-multi-select-combo-box.d.ts @@ -159,7 +159,6 @@ export interface MultiSelectComboBoxEventMap extends HTMLElementEventMap * @fires {CustomEvent} custom-value-set - Fired when the user sets a custom value. * @fires {CustomEvent} filter-changed - Fired when the `filter` property changes. * @fires {CustomEvent} invalid-changed - Fired when the `invalid` property changes. - * @fires {CustomEvent} dirty-changed - Fired when the `dirty` property changes. * @fires {CustomEvent} selected-items-changed - Fired when the `selectedItems` property changes. * @fires {CustomEvent} validated - Fired whenever the field is validated. */ diff --git a/packages/multi-select-combo-box/src/vaadin-multi-select-combo-box.js b/packages/multi-select-combo-box/src/vaadin-multi-select-combo-box.js index 96e5ceb4a6..ee90c8769b 100644 --- a/packages/multi-select-combo-box/src/vaadin-multi-select-combo-box.js +++ b/packages/multi-select-combo-box/src/vaadin-multi-select-combo-box.js @@ -813,7 +813,6 @@ class MultiSelectComboBox extends ResizeMixin(InputControlMixin(ThemableMixin(El /** @private */ __updateSelection(selectedItems) { - this.dirty = true; this.selectedItems = selectedItems; this.validate(); diff --git a/packages/multi-select-combo-box/test/dirty-state.test.js b/packages/multi-select-combo-box/test/dirty-state.test.js deleted file mode 100644 index e7f5fcad81..0000000000 --- a/packages/multi-select-combo-box/test/dirty-state.test.js +++ /dev/null @@ -1,79 +0,0 @@ -import { expect } from '@esm-bundle/chai'; -import { fixtureSync, outsideClick } from '@vaadin/testing-helpers'; -import { sendKeys } from '@web/test-runner-commands'; -import '../src/vaadin-multi-select-combo-box.js'; -import { getAllItems } from './helpers.js'; - -describe('dirty state', () => { - let comboBox; - - beforeEach(() => { - comboBox = fixtureSync(''); - comboBox.items = ['Item 1', 'Item 2', 'Item 3']; - }); - - it('should not be dirty by default', () => { - expect(comboBox.dirty).to.be.false; - }); - - it('should not be dirty after programmatic value change', async () => { - comboBox.value = ['Item 1']; - expect(comboBox.dirty).to.be.false; - }); - - it('should not be dirty after blur without change', () => { - comboBox.focus(); - comboBox.blur(); - expect(comboBox.dirty).to.be.false; - }); - - it('should not be dirty after pressing Enter without change', async () => { - comboBox.focus(); - await sendKeys({ press: 'Enter' }); - expect(comboBox.dirty).to.be.false; - }); - - it('should not be dirty after closing the dropdown without change', async () => { - comboBox.focus(); - comboBox.click(); - outsideClick(); - expect(comboBox.dirty).to.be.false; - }); - - it('should not be dirty after cancelling selection and closing the dropdown', async () => { - comboBox.focus(); - comboBox.click(); - await sendKeys({ press: 'ArrowDown' }); - await sendKeys({ press: 'Escape' }); - await sendKeys({ press: 'Escape' }); - expect(comboBox.dirty).to.be.false; - }); - - it('should be dirty after user input', async () => { - comboBox.focus(); - await sendKeys({ press: 'I' }); - expect(comboBox.dirty).to.be.true; - }); - - it('should be dirty after selecting a dropdown item with click', () => { - comboBox.focus(); - comboBox.click(); - getAllItems(comboBox)[0].click(); - expect(comboBox.dirty).to.be.true; - }); - - it('should be dirty after selecting a dropdown item with Enter', async () => { - comboBox.focus(); - comboBox.click(); - await sendKeys({ press: 'ArrowDown' }); - await sendKeys({ press: 'Enter' }); - expect(comboBox.dirty).to.be.true; - }); - - it('should be dirty after clear button click', () => { - comboBox.clearButtonVisible = true; - comboBox.value = 'foo'; - comboBox.$.clearButton.click(); - expect(comboBox.dirty).to.be.true; - }); -}); diff --git a/packages/multi-select-combo-box/test/helpers.js b/packages/multi-select-combo-box/test/helpers.js index 8bed8039e7..a5367953d5 100644 --- a/packages/multi-select-combo-box/test/helpers.js +++ b/packages/multi-select-combo-box/test/helpers.js @@ -15,12 +15,3 @@ export const getAsyncDataProvider = (allItems) => { }, 0); }; }; - -/** - * Returns all the items of the combo box dropdown. - */ -export const getAllItems = (comboBox) => { - return Array.from(comboBox.$.comboBox._scroller.querySelectorAll('vaadin-multi-select-combo-box-item')) - .filter((item) => !item.hidden) - .sort((a, b) => a.index - b.index); -}; diff --git a/packages/number-field/src/vaadin-number-field.d.ts b/packages/number-field/src/vaadin-number-field.d.ts index effe1a08cb..a15ca5761c 100644 --- a/packages/number-field/src/vaadin-number-field.d.ts +++ b/packages/number-field/src/vaadin-number-field.d.ts @@ -20,11 +20,6 @@ export type NumberFieldChangeEvent = Event & { */ export type NumberFieldInvalidChangedEvent = CustomEvent<{ value: boolean }>; -/** - * Fired when the `dirty` property changes. - */ -export type NumberFieldDirtyChangedEvent = CustomEvent<{ value: boolean }>; - /** * Fired when the `value` property changes. */ @@ -38,8 +33,6 @@ export type NumberFieldValidatedEvent = CustomEvent<{ valid: boolean }>; export interface NumberFieldCustomEventMap { 'invalid-changed': NumberFieldInvalidChangedEvent; - 'dirty-changed': NumberFieldDirtyChangedEvent; - 'value-changed': NumberFieldValueChangedEvent; validated: NumberFieldValidatedEvent; @@ -73,7 +66,6 @@ export interface NumberFieldEventMap extends HTMLElementEventMap, NumberFieldCus * @fires {Event} input - Fired when the value is changed by the user: on every typing keystroke, and the value is cleared using the clear button. * @fires {Event} change - Fired when the user commits a value change. * @fires {CustomEvent} invalid-changed - Fired when the `invalid` property changes. - * @fires {CustomEvent} dirty-changed - Fired when the `dirty` property changes. * @fires {CustomEvent} value-changed - Fired when the `value` property changes. * @fires {CustomEvent} validated - Fired whenever the field is validated. */ diff --git a/packages/number-field/test/typings/number-field.types.ts b/packages/number-field/test/typings/number-field.types.ts index b3dbc7b86e..faf661a87d 100644 --- a/packages/number-field/test/typings/number-field.types.ts +++ b/packages/number-field/test/typings/number-field.types.ts @@ -8,7 +8,6 @@ import type { ThemableMixinClass } from '@vaadin/vaadin-themable-mixin/vaadin-th import type { NumberField, NumberFieldChangeEvent, - NumberFieldDirtyChangedEvent, NumberFieldInvalidChangedEvent, NumberFieldValidatedEvent, NumberFieldValueChangedEvent, @@ -37,11 +36,6 @@ field.addEventListener('invalid-changed', (event) => { assertType(event.detail.value); }); -field.addEventListener('dirty-changed', (event) => { - assertType(event); - assertType(event.detail.value); -}); - field.addEventListener('value-changed', (event) => { assertType(event); assertType(event.detail.value); diff --git a/packages/password-field/src/vaadin-password-field.d.ts b/packages/password-field/src/vaadin-password-field.d.ts index 041ead197d..a163938518 100644 --- a/packages/password-field/src/vaadin-password-field.d.ts +++ b/packages/password-field/src/vaadin-password-field.d.ts @@ -17,11 +17,6 @@ export type PasswordFieldChangeEvent = Event & { */ export type PasswordFieldInvalidChangedEvent = CustomEvent<{ value: boolean }>; -/** - * Fired when the `dirty` property changes. - */ -export type PasswordFieldDirtyChangedEvent = CustomEvent<{ value: boolean }>; - /** * Fired when the `value` property changes. */ @@ -35,8 +30,6 @@ export type PasswordFieldValidatedEvent = CustomEvent<{ valid: boolean }>; export interface PasswordFieldCustomEventMap { 'invalid-changed': PasswordFieldInvalidChangedEvent; - 'dirty-changed': PasswordFieldDirtyChangedEvent; - 'value-changed': PasswordFieldValueChangedEvent; validated: PasswordFieldValidatedEvent; @@ -75,7 +68,6 @@ export interface PasswordFieldEventMap extends HTMLElementEventMap, PasswordFiel * @fires {Event} input - Fired when the value is changed by the user: on every typing keystroke, and the value is cleared using the clear button. * @fires {Event} change - Fired when the user commits a value change. * @fires {CustomEvent} invalid-changed - Fired when the `invalid` property changes. - * @fires {CustomEvent} dirty-changed - Fired when the `dirty` property changes. * @fires {CustomEvent} value-changed - Fired when the `value` property changes. * @fires {CustomEvent} validated - Fired whenever the field is validated. */ diff --git a/packages/password-field/test/typings/password-field.types.ts b/packages/password-field/test/typings/password-field.types.ts index 2d3a75264f..5d103f6513 100644 --- a/packages/password-field/test/typings/password-field.types.ts +++ b/packages/password-field/test/typings/password-field.types.ts @@ -2,7 +2,6 @@ import '../../vaadin-password-field.js'; import type { PasswordField, PasswordFieldChangeEvent, - PasswordFieldDirtyChangedEvent, PasswordFieldInvalidChangedEvent, PasswordFieldValidatedEvent, PasswordFieldValueChangedEvent, @@ -22,11 +21,6 @@ field.addEventListener('invalid-changed', (event) => { assertType(event.detail.value); }); -field.addEventListener('dirty-changed', (event) => { - assertType(event); - assertType(event.detail.value); -}); - field.addEventListener('value-changed', (event) => { assertType(event); assertType(event.detail.value); diff --git a/packages/radio-group/src/vaadin-radio-group.d.ts b/packages/radio-group/src/vaadin-radio-group.d.ts index f87ff5905a..90028a5809 100644 --- a/packages/radio-group/src/vaadin-radio-group.d.ts +++ b/packages/radio-group/src/vaadin-radio-group.d.ts @@ -15,11 +15,6 @@ import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mix */ export type RadioGroupInvalidChangedEvent = CustomEvent<{ value: boolean }>; -/** - * Fired when the `dirty` property changes. - */ -export type RadioGroupDirtyChangedEvent = CustomEvent<{ value: boolean }>; - /** * Fired when the `value` property changes. */ @@ -33,8 +28,6 @@ export type RadioGroupValidatedEvent = CustomEvent<{ valid: boolean }>; export interface RadioGroupCustomEventMap { 'invalid-changed': RadioGroupInvalidChangedEvent; - 'dirty-changed': RadioGroupDirtyChangedEvent; - 'value-changed': RadioGroupValueChangedEvent; validated: RadioGroupValidatedEvent; @@ -81,7 +74,6 @@ export interface RadioGroupEventMap extends HTMLElementEventMap, RadioGroupCusto * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation. * * @fires {CustomEvent} invalid-changed - Fired when the `invalid` property changes. - * @fires {CustomEvent} dirty-changed - Fired when the `dirty` property changes. * @fires {CustomEvent} value-changed - Fired when the `value` property changes. * @fires {CustomEvent} validated - Fired whenever the field is validated. */ @@ -101,15 +93,6 @@ declare class RadioGroup extends FieldMixin( */ readonly: boolean; - /** - * Whether the field is dirty. - * - * The field is automatically marked as dirty once the user triggers - * a `change` event. Additionally, the field can be manually marked - * as dirty by setting the property to `true`. - */ - dirty: boolean; - addEventListener( type: K, listener: (this: RadioGroup, ev: RadioGroupEventMap[K]) => void, diff --git a/packages/radio-group/src/vaadin-radio-group.js b/packages/radio-group/src/vaadin-radio-group.js index 3f7baebd14..2f47a2fdaa 100644 --- a/packages/radio-group/src/vaadin-radio-group.js +++ b/packages/radio-group/src/vaadin-radio-group.js @@ -163,19 +163,6 @@ class RadioGroup extends FieldMixin( _fieldName: { type: String, }, - - /** - * Whether the field is dirty. - * - * The field is automatically marked as dirty once the user triggers - * a `change` event. Additionally, the field can be manually marked - * as dirty by setting the property to `true`. - */ - dirty: { - type: Boolean, - value: false, - notify: true, - }, }; } @@ -184,7 +171,6 @@ class RadioGroup extends FieldMixin( this.__registerRadioButton = this.__registerRadioButton.bind(this); this.__unregisterRadioButton = this.__unregisterRadioButton.bind(this); - this.__onRadioButtonChange = this.__onRadioButtonChange.bind(this); this.__onRadioButtonCheckedChange = this.__onRadioButtonCheckedChange.bind(this); } @@ -337,7 +323,6 @@ class RadioGroup extends FieldMixin( */ __registerRadioButton(radioButton) { radioButton.name = this._fieldName; - radioButton.addEventListener('change', this.__onRadioButtonChange); radioButton.addEventListener('checked-changed', this.__onRadioButtonCheckedChange); if (this.disabled || this.readonly) { @@ -356,7 +341,6 @@ class RadioGroup extends FieldMixin( * @private */ __unregisterRadioButton(radioButton) { - radioButton.removeEventListener('change', this.__onRadioButtonChange); radioButton.removeEventListener('checked-changed', this.__onRadioButtonCheckedChange); if (radioButton.value === this.value) { @@ -364,11 +348,6 @@ class RadioGroup extends FieldMixin( } } - /** @private */ - __onRadioButtonChange() { - this.dirty = true; - } - /** * @param {!CustomEvent} event * @private diff --git a/packages/radio-group/test/radio-group.test.js b/packages/radio-group/test/radio-group.test.js index 04b7569af6..038ce453c5 100644 --- a/packages/radio-group/test/radio-group.test.js +++ b/packages/radio-group/test/radio-group.test.js @@ -1,5 +1,5 @@ import { expect } from '@esm-bundle/chai'; -import { fixtureSync, nextFrame, nextRender } from '@vaadin/testing-helpers'; +import { fixtureSync, nextFrame } from '@vaadin/testing-helpers'; import { sendKeys } from '@web/test-runner-commands'; import sinon from 'sinon'; import '../vaadin-radio-group.js'; @@ -476,40 +476,6 @@ describe('radio-group', () => { }); }); - describe('dirty state', () => { - beforeEach(async () => { - group = fixtureSync(` - - - - - `); - await nextRender(); - buttons = [...group.querySelectorAll('vaadin-radio-button')]; - }); - - it('should not be dirty by default', () => { - expect(group.dirty).to.be.false; - }); - - it('should not be dirty after programmatic value change', () => { - group.value = '1'; - expect(group.dirty).to.be.false; - }); - - it('should be dirty after selecting a radio button', () => { - buttons[0].click(); - expect(group.dirty).to.be.true; - }); - - it('should fire dirty-changed event when the state changes', () => { - const spy = sinon.spy(); - group.addEventListener('dirty-changed', spy); - group.dirty = true; - expect(spy.calledOnce).to.be.true; - }); - }); - describe('wrapping', () => { let wrapper; diff --git a/packages/radio-group/test/typings/radio-button.types.ts b/packages/radio-group/test/typings/radio-button.types.ts index eb3beb2ae3..ce1ef83ed7 100644 --- a/packages/radio-group/test/typings/radio-button.types.ts +++ b/packages/radio-group/test/typings/radio-button.types.ts @@ -12,7 +12,6 @@ import type { LabelMixinClass } from '@vaadin/field-base/src/label-mixin.js'; import type { ThemableMixinClass } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js'; import type { RadioButtonCheckedChangedEvent } from '../../vaadin-radio-button.js'; import type { - RadioGroupDirtyChangedEvent, RadioGroupInvalidChangedEvent, RadioGroupValidatedEvent, RadioGroupValueChangedEvent, @@ -55,11 +54,6 @@ group.addEventListener('invalid-changed', (event) => { assertType(event.detail.value); }); -group.addEventListener('dirty-changed', (event) => { - assertType(event); - assertType(event.detail.value); -}); - group.addEventListener('value-changed', (event) => { assertType(event); assertType(event.detail.value); diff --git a/packages/select/src/vaadin-select-base-mixin.d.ts b/packages/select/src/vaadin-select-base-mixin.d.ts index 06dcb71491..5f86c7395b 100644 --- a/packages/select/src/vaadin-select-base-mixin.d.ts +++ b/packages/select/src/vaadin-select-base-mixin.d.ts @@ -102,15 +102,6 @@ export declare class SelectBaseMixinClass { */ readonly: boolean; - /** - * Whether the field is dirty. - * - * The field is automatically marked as dirty once the user triggers - * a `change` event. Additionally, the field can be manually marked - * as dirty by setting the property to `true`. - */ - dirty: boolean; - /** * Requests an update for the content of the select. * While performing the update, it invokes the renderer passed in the `renderer` property. diff --git a/packages/select/src/vaadin-select-base-mixin.js b/packages/select/src/vaadin-select-base-mixin.js index 43cf7d849e..4844012264 100644 --- a/packages/select/src/vaadin-select-base-mixin.js +++ b/packages/select/src/vaadin-select-base-mixin.js @@ -127,19 +127,6 @@ export const SelectBaseMixin = (superClass) => reflectToAttribute: true, }, - /** - * Whether the field is dirty. - * - * The field is automatically marked as dirty once the user triggers - * a `change` event. Additionally, the field can be manually marked - * as dirty by setting the property to `true`. - */ - dirty: { - type: Boolean, - value: false, - notify: true, - }, - /** @private */ _phone: Boolean, @@ -632,7 +619,6 @@ export const SelectBaseMixin = (superClass) => await this.updateComplete; } - this.dirty = true; this.validate(); this.dispatchEvent(new CustomEvent('change', { bubbles: true })); this.__dispatchChangePending = false; diff --git a/packages/select/src/vaadin-select.d.ts b/packages/select/src/vaadin-select.d.ts index 596811b7e0..c42f463849 100644 --- a/packages/select/src/vaadin-select.d.ts +++ b/packages/select/src/vaadin-select.d.ts @@ -41,11 +41,6 @@ export type SelectOpenedChangedEvent = CustomEvent<{ value: boolean }>; */ export type SelectInvalidChangedEvent = CustomEvent<{ value: boolean }>; -/** - * Fired when the `dirty` property changes. - */ -export type SelectDirtyChangedEvent = CustomEvent<{ value: boolean }>; - /** * Fired when the `value` property changes. */ @@ -61,8 +56,6 @@ export interface SelectCustomEventMap { 'invalid-changed': SelectInvalidChangedEvent; - 'dirty-changed': SelectDirtyChangedEvent; - 'value-changed': SelectValueChangedEvent; validated: SelectValidatedEvent; @@ -174,7 +167,6 @@ export interface SelectEventMap extends HTMLElementEventMap, SelectCustomEventMa * @fires {Event} change - Fired when the user commits a value change. * @fires {CustomEvent} invalid-changed - Fired when the `invalid` property changes. * @fires {CustomEvent} opened-changed - Fired when the `opened` property changes. - * @fires {CustomEvent} dirty-changed - Fired when the `dirty` property changes. * @fires {CustomEvent} value-changed - Fired when the `value` property changes. * @fires {CustomEvent} validated - Fired whenever the field is validated. */ diff --git a/packages/select/test/dirty-state-lit.test.js b/packages/select/test/dirty-state-lit.test.js deleted file mode 100644 index 2c90c6995e..0000000000 --- a/packages/select/test/dirty-state-lit.test.js +++ /dev/null @@ -1,2 +0,0 @@ -import '../src/vaadin-lit-select.js'; -import './dirty-state.common.js'; diff --git a/packages/select/test/dirty-state-polymer.test.js b/packages/select/test/dirty-state-polymer.test.js deleted file mode 100644 index 64a67afd4f..0000000000 --- a/packages/select/test/dirty-state-polymer.test.js +++ /dev/null @@ -1,2 +0,0 @@ -import '../src/vaadin-select.js'; -import './dirty-state.common.js'; diff --git a/packages/select/test/dirty-state.common.js b/packages/select/test/dirty-state.common.js deleted file mode 100644 index a81a28c381..0000000000 --- a/packages/select/test/dirty-state.common.js +++ /dev/null @@ -1,70 +0,0 @@ -import { expect } from '@esm-bundle/chai'; -import { fixtureSync, nextRender, nextUpdate, outsideClick } from '@vaadin/testing-helpers'; -import { sendKeys } from '@web/test-runner-commands'; -import sinon from 'sinon'; -import { getDeepActiveElement } from '@vaadin/a11y-base/src/focus-utils.js'; - -describe('dirty state', () => { - let select; - - beforeEach(async () => { - select = fixtureSync(''); - select.items = [ - { label: 'Item 1', value: 'item-1' }, - { label: 'Item 2', value: 'item-2' }, - ]; - await nextRender(); - }); - - it('should not be dirty by default', () => { - expect(select.dirty).to.be.false; - }); - - it('should not be dirty after programmatic value change', async () => { - select.value = 'item-1'; - await nextUpdate(select); - expect(select.dirty).to.be.false; - }); - - it('should not be dirty after blur without change', () => { - select.focus(); - select.blur(); - expect(select.dirty).to.be.false; - }); - - it('should not be dirty after outside click without change', async () => { - select.focus(); - select.click(); - outsideClick(); - expect(select.dirty).to.be.false; - }); - - it('should be dirty after selecting a menu item with click', async () => { - select.focus(); - select.click(); - await nextRender(); - const menuItem = getDeepActiveElement(); - menuItem.click(); - await nextUpdate(select._menuElement); - await nextUpdate(select); - expect(select.dirty).to.be.true; - }); - - it('should be dirty after selecting a menu item with Enter', async () => { - select.focus(); - select.click(); - await nextRender(); - await sendKeys({ press: 'Enter' }); - await nextUpdate(select._menuElement); - await nextUpdate(select); - expect(select.dirty).to.be.true; - }); - - it('should fire dirty-changed event when the state changes', async () => { - const spy = sinon.spy(); - select.addEventListener('dirty-changed', spy); - select.dirty = true; - await nextUpdate(select); - expect(spy.calledOnce).to.be.true; - }); -}); diff --git a/packages/select/test/typings/select.types.ts b/packages/select/test/typings/select.types.ts index db63e950ba..f0ec605a6b 100644 --- a/packages/select/test/typings/select.types.ts +++ b/packages/select/test/typings/select.types.ts @@ -18,7 +18,6 @@ import type { SelectListBox } from '../../src/vaadin-select-list-box.js'; import type { Select, SelectChangeEvent, - SelectDirtyChangedEvent, SelectInvalidChangedEvent, SelectItem as Item, SelectOpenedChangedEvent, @@ -80,11 +79,6 @@ select.addEventListener('invalid-changed', (event) => { assertType(event.detail.value); }); -select.addEventListener('dirty-changed', (event) => { - assertType(event); - assertType(event.detail.value); -}); - select.addEventListener('value-changed', (event) => { assertType(event); assertType(event.detail.value); diff --git a/packages/text-area/src/vaadin-text-area.d.ts b/packages/text-area/src/vaadin-text-area.d.ts index c763f250cb..dd06f8db22 100644 --- a/packages/text-area/src/vaadin-text-area.d.ts +++ b/packages/text-area/src/vaadin-text-area.d.ts @@ -19,11 +19,6 @@ export type TextAreaChangeEvent = Event & { */ export type TextAreaInvalidChangedEvent = CustomEvent<{ value: boolean }>; -/** - * Fired when the `dirty` property changes. - */ -export type TextAreaDirtyChangedEvent = CustomEvent<{ value: boolean }>; - /** * Fired when the `value` property changes. */ @@ -37,8 +32,6 @@ export type TextAreaValidatedEvent = CustomEvent<{ valid: boolean }>; export interface TextAreaCustomEventMap { 'invalid-changed': TextAreaInvalidChangedEvent; - 'dirty-changed': TextAreaDirtyChangedEvent; - 'value-changed': TextAreaValueChangedEvent; validated: TextAreaValidatedEvent; @@ -87,7 +80,6 @@ export interface TextAreaEventMap extends HTMLElementEventMap, TextAreaCustomEve * @fires {Event} input - Fired when the value is changed by the user: on every typing keystroke, and the value is cleared using the clear button. * @fires {Event} change - Fired when the user commits a value change. * @fires {CustomEvent} invalid-changed - Fired when the `invalid` property changes. - * @fires {CustomEvent} dirty-changed - Fired when the `dirty` property changes. * @fires {CustomEvent} value-changed - Fired when the `value` property changes. * @fires {CustomEvent} validated - Fired whenever the field is validated. */ diff --git a/packages/text-area/test/typings/text-area.types.ts b/packages/text-area/test/typings/text-area.types.ts index b1221b6794..da1cb62b9a 100644 --- a/packages/text-area/test/typings/text-area.types.ts +++ b/packages/text-area/test/typings/text-area.types.ts @@ -8,7 +8,6 @@ import type { ThemableMixinClass } from '@vaadin/vaadin-themable-mixin/vaadin-th import type { TextArea, TextAreaChangeEvent, - TextAreaDirtyChangedEvent, TextAreaInvalidChangedEvent, TextAreaValidatedEvent, TextAreaValueChangedEvent, @@ -37,11 +36,6 @@ area.addEventListener('invalid-changed', (event) => { assertType(event.detail.value); }); -area.addEventListener('dirty-changed', (event) => { - assertType(event); - assertType(event.detail.value); -}); - area.addEventListener('value-changed', (event) => { assertType(event); assertType(event.detail.value); diff --git a/packages/text-field/src/vaadin-text-field.d.ts b/packages/text-field/src/vaadin-text-field.d.ts index 27e786595d..8ce0f7bfcb 100644 --- a/packages/text-field/src/vaadin-text-field.d.ts +++ b/packages/text-field/src/vaadin-text-field.d.ts @@ -19,11 +19,6 @@ export type TextFieldChangeEvent = Event & { */ export type TextFieldInvalidChangedEvent = CustomEvent<{ value: boolean }>; -/** - * Fired when the `dirty` property changes. - */ -export type TextFieldDirtyChangedEvent = CustomEvent<{ value: boolean }>; - /** * Fired when the `value` property changes. */ @@ -37,8 +32,6 @@ export type TextFieldValidatedEvent = CustomEvent<{ valid: boolean }>; export interface TextFieldCustomEventMap { 'invalid-changed': TextFieldInvalidChangedEvent; - 'dirty-changed': TextFieldDirtyChangedEvent; - 'value-changed': TextFieldValueChangedEvent; validated: TextFieldValidatedEvent; @@ -108,7 +101,6 @@ export interface TextFieldEventMap extends HTMLElementEventMap, TextFieldCustomE * @fires {Event} input - Fired when the value is changed by the user: on every typing keystroke, and the value is cleared using the clear button. * @fires {Event} change - Fired when the user commits a value change. * @fires {CustomEvent} invalid-changed - Fired when the `invalid` property changes. - * @fires {CustomEvent} dirty-changed - Fired when the `dirty` property changes. * @fires {CustomEvent} value-changed - Fired when the `value` property changes. * @fires {CustomEvent} validated - Fired whenever the field is validated. */ diff --git a/packages/text-field/test/typings/text-field.types.ts b/packages/text-field/test/typings/text-field.types.ts index 9f8715bd55..60ac656063 100644 --- a/packages/text-field/test/typings/text-field.types.ts +++ b/packages/text-field/test/typings/text-field.types.ts @@ -8,7 +8,6 @@ import type { ThemableMixinClass } from '@vaadin/vaadin-themable-mixin/vaadin-th import type { TextField, TextFieldChangeEvent, - TextFieldDirtyChangedEvent, TextFieldInvalidChangedEvent, TextFieldValidatedEvent, TextFieldValueChangedEvent, @@ -37,11 +36,6 @@ field.addEventListener('invalid-changed', (event) => { assertType(event.detail.value); }); -field.addEventListener('dirty-changed', (event) => { - assertType(event); - assertType(event.detail.value); -}); - field.addEventListener('value-changed', (event) => { assertType(event); assertType(event.detail.value); diff --git a/packages/time-picker/src/vaadin-time-picker.d.ts b/packages/time-picker/src/vaadin-time-picker.d.ts index 376d3f3d7e..a8e0e1d224 100644 --- a/packages/time-picker/src/vaadin-time-picker.d.ts +++ b/packages/time-picker/src/vaadin-time-picker.d.ts @@ -37,11 +37,6 @@ export type TimePickerInvalidChangedEvent = CustomEvent<{ value: boolean }>; */ export type TimePickerOpenedChangedEvent = CustomEvent<{ value: boolean }>; -/** - * Fired when the `dirty` property changes. - */ -export type TimePickerDirtyChangedEvent = CustomEvent<{ value: boolean }>; - /** * Fired when the `value` property changes. */ @@ -57,8 +52,6 @@ export interface TimePickerCustomEventMap { 'opened-changed': TimePickerOpenedChangedEvent; - 'dirty-changed': TimePickerDirtyChangedEvent; - 'value-changed': TimePickerValueChangedEvent; validated: TimePickerValidatedEvent; @@ -122,7 +115,6 @@ export interface TimePickerEventMap extends HTMLElementEventMap, TimePickerCusto * @fires {Event} change - Fired when the user commits a value change. * @fires {CustomEvent} invalid-changed - Fired when the `invalid` property changes. * @fires {CustomEvent} opened-changed - Fired when the `opened` property changes. - * @fires {CustomEvent} dirty-changed - Fired when the `dirty` property changes. * @fires {CustomEvent} value-changed - Fired when the `value` property changes. * @fires {CustomEvent} validated - Fired whenever the field is validated. */ diff --git a/packages/time-picker/src/vaadin-time-picker.js b/packages/time-picker/src/vaadin-time-picker.js index c40f0c772d..10f8d05ce4 100644 --- a/packages/time-picker/src/vaadin-time-picker.js +++ b/packages/time-picker/src/vaadin-time-picker.js @@ -115,7 +115,6 @@ class TimePicker extends PatternMixin(InputControlMixin(ThemableMixin(ElementMix { - let timePicker; - - beforeEach(() => { - timePicker = fixtureSync(''); - }); - - it('should not be dirty by default', () => { - expect(timePicker.dirty).to.be.false; - }); - - it('should not be dirty after blur without change', () => { - timePicker.focus(); - timePicker.blur(); - expect(timePicker.dirty).to.be.false; - }); - - it('should not be dirty after outside click without change', async () => { - timePicker.focus(); - timePicker.click(); - outsideClick(); - expect(timePicker.dirty).to.be.false; - }); - - it('should not be dirty after pressing Enter without change', async () => { - timePicker.focus(); - await sendKeys({ press: 'Enter' }); - expect(timePicker.dirty).to.be.false; - }); - - it('should not be dirty after cancelling selection and closing the dropdown', async () => { - timePicker.focus(); - timePicker.click(); - await sendKeys({ press: 'ArrowDown' }); - await sendKeys({ press: 'Escape' }); - await sendKeys({ press: 'Escape' }); - expect(timePicker.dirty).to.be.false; - }); - - it('should be dirty after user input', async () => { - timePicker.focus(); - await sendKeys({ type: '1' }); - expect(timePicker.dirty).to.be.true; - }); - - it('should be dirty after selecting a dropdown item with click', () => { - timePicker.focus(); - timePicker.click(); - getAllItems(timePicker)[0].click(); - expect(timePicker.dirty).to.be.true; - }); - - it('should be dirty after selecting a dropdown item with Enter', async () => { - timePicker.focus(); - timePicker.click(); - await sendKeys({ press: 'ArrowDown' }); - await sendKeys({ press: 'Enter' }); - expect(timePicker.dirty).to.be.true; - }); - - it('should be dirty after clear button click', () => { - timePicker.clearButtonVisible = true; - timePicker.value = '12:00'; - timePicker.$.clearButton.click(); - expect(timePicker.dirty).to.be.true; - }); -}); diff --git a/packages/time-picker/test/helpers.js b/packages/time-picker/test/helpers.js index 9fc3b10eda..20c497e6f7 100644 --- a/packages/time-picker/test/helpers.js +++ b/packages/time-picker/test/helpers.js @@ -10,13 +10,3 @@ export function setInputValue(timePicker, value) { timePicker.inputElement.value = value; fire(timePicker.inputElement, 'input'); } - -/** - * Returns all the items of the time-picker dropdown. - */ -export const getAllItems = (timePicker) => { - const { comboBox } = timePicker.$; - return Array.from(comboBox._scroller.querySelectorAll('vaadin-time-picker-item')) - .filter((item) => !item.hidden) - .sort((a, b) => a.index - b.index); -}; diff --git a/packages/time-picker/test/typings/time-picker.types.ts b/packages/time-picker/test/typings/time-picker.types.ts index 70bf94b5c5..000e0b8f00 100644 --- a/packages/time-picker/test/typings/time-picker.types.ts +++ b/packages/time-picker/test/typings/time-picker.types.ts @@ -15,7 +15,6 @@ import type { TimePickerItem } from '../../src/vaadin-time-picker-item.js'; import type { TimePicker, TimePickerChangeEvent, - TimePickerDirtyChangedEvent, TimePickerInvalidChangedEvent, TimePickerOpenedChangedEvent, TimePickerValidatedEvent, @@ -60,11 +59,6 @@ timePicker.addEventListener('opened-changed', (event) => { assertType(event.detail.value); }); -timePicker.addEventListener('dirty-changed', (event) => { - assertType(event); - assertType(event.detail.value); -}); - timePicker.addEventListener('value-changed', (event) => { assertType(event); assertType(event.detail.value);