q2-tecton-elements 1.47.0 → 1.48.0

package/dist/test/elements/q2-editable-field-test.e2e.js

@@ -1,4 +1,4 @@
-import { setTestStrings, setup, dispatchEvent, getActiveElementTestId, testDeprecatedAriaLabel, getNestedElementStyle, getNestedElementProperty, getListOfStyleCompilationIssues, } from "../helpers";
+import { setTestStrings, setup, dispatchEvent, getActiveElementTestId, testDeprecatedAriaLabel, getNestedElementStyle, getNestedElementProperty, getListOfStyleCompilationIssues, evaluateA11y, } from "../helpers";
 describe('q2-editable-field', () => {
     let page;
     let editableField;
@@ -7,194 +7,9 @@ describe('q2-editable-field', () => {
     let saveButton;
     let cancelButton;
     it('properly compiles CSS vars and functions', async () => {
-        const page = await setup({ html: '<q2-editable-field></q2-editable-field>' });
+        page = await setup({ html: '<q2-editable-field></q2-editable-field>' });
         expect(await getListOfStyleCompilationIssues(page, 'q2-editable-field')).toHaveLength(0);
     });
-    it('should render the component in the dom', async () => {
-        page = await setup({ html: `<q2-editable-field></q2-editable-field>` });
-        editableField = await page.find('q2-editable-field');
-        expect(editableField.tagName).toEqual('Q2-EDITABLE-FIELD');
-        const editStateWrapper = await page.find('q2-editable-field >>> .q2-editable-field-wrapper:nth-child(1)');
-        const readStateWrapper = await page.find('q2-editable-field >>> .q2-editable-field-wrapper:nth-child(2)');
-        // both edit and read states render
-        expect(editStateWrapper).toBeTruthy();
-        expect(readStateWrapper).toBeTruthy();
-    });
-    it('it correctly renders the read state when label not persisted', async () => {
-        page = await setup({
-            html: `<q2-editable-field value="Test Value"></q2-editable-field>`,
-        });
-        const readStateWrapper = await page.find('q2-editable-field >>> .q2-editable-field-wrapper:nth-child(2)');
-        const readStateHidden = await readStateWrapper.getProperty('hidden');
-        const readStateTextWrapper = await page.find('q2-editable-field >>> .text-wrapper');
-        const editButton = await page.find('q2-editable-field >>> .begin-edit');
-        expect(readStateHidden).toEqual(false);
-        expect(readStateWrapper).not.toHaveClass('editing');
-        // value rendered into text wrapper
-        expect(readStateTextWrapper.textContent).toEqual('Test Value');
-        // edit button renders
-        expect(editButton).toBeTruthy();
-    });
-    it('it correctly renders the read state when label is persisted', async () => {
-        page = await setup({
-            html: `<q2-editable-field value="Test Value" label="Test Label" persistent-label></q2-editable-field>`,
-        });
-        const readStateWrapper = await page.find('q2-editable-field >>> .q2-editable-field-wrapper:nth-child(2)');
-        expect(readStateWrapper).not.toHaveClass('editing');
-        expect(await readStateWrapper.getProperty('hidden')).toEqual(false);
-        const readStateLabel = await page.find('q2-editable-field >>> .read-state-label');
-        expect(readStateLabel).not.toBeNull;
-        expect(readStateLabel.tagName).toEqual('DT');
-        expect(readStateLabel.textContent).toEqual('Test Label');
-        const readStateTextWrapper = await page.find('q2-editable-field >>> .text-wrapper');
-        // value rendered into text wrapper
-        expect(readStateTextWrapper.textContent).toEqual('Test Value');
-        const editButton = await page.find('q2-editable-field >>> .begin-edit');
-        // edit button renders
-        expect(editButton).toBeTruthy();
-    });
-    it('correctly renders the edit state', async () => {
-        page = await setup({
-            html: `<q2-editable-field editing value="Test Value"></q2-editable-field>`,
-        });
-        const editStateWrapper = await page.find('q2-editable-field >>> .q2-editable-field-wrapper:nth-child(1)');
-        const innerInput = await page.find('q2-editable-field >>> q2-input');
-        expect(editStateWrapper).toHaveClass('editing');
-        // input renders
-        expect(innerInput).toBeTruthy();
-        const inputValue = await innerInput.getProperty('value');
-        // input value matches element value
-        expect(inputValue).toEqual('Test Value');
-        const cancelBtn = await page.find('q2-editable-field >>> .cancel-edit');
-        const saveBtn = await page.find('q2-editable-field >>> .save-edit');
-        expect(cancelBtn).toBeTruthy();
-        expect(saveBtn).toBeTruthy();
-    });
-    it('passes appropriate properties through to q2-input', async () => {
-        page = await setup({
-            html: `<q2-editable-field editing label="Test Label" type="testType" format-modifier="testFormatModifier" maxlength="10" value="Test Value"></q2-editable-field>`,
-        });
-        editableField = await page.find('q2-editable-field');
-        editableField.setProperty('errors', ['error1', 'error2']);
-        editableField.setProperty('hints', ['hint1', 'hint2']);
-        await page.waitForChanges();
-        const innerInput = await page.find('q2-editable-field >>> q2-input');
-        const inputType = await innerInput.getProperty('type');
-        const inputErrors = await innerInput.getProperty('errors');
-        const inputHints = await innerInput.getProperty('hints');
-        const inputLabel = await innerInput.getProperty('label');
-        const inputFormatter = await innerInput.getProperty('formatModifier');
-        const inputMaxLength = await innerInput.getProperty('maxlength');
-        expect(inputType).toEqual('testType');
-        expect(inputErrors).toEqual(['error1', 'error2']);
-        expect(inputHints).toEqual(['hint1', 'hint2']);
-        expect(inputLabel).toEqual('Test Label');
-        expect(inputFormatter).toEqual('testFormatModifier');
-        expect(inputMaxLength).toEqual(10);
-        expect(innerInput).not.toHaveAttribute('hide-label');
-        editableField.setProperty('ariaLabel', 'Test aria-label');
-        await page.waitForChanges();
-        expect(innerInput).toEqualAttribute('label', 'Test aria-label');
-        expect(innerInput).toHaveAttribute('hide-label');
-    });
-    it('correctly bubbles the q2-input input event', async function () {
-        page = await setup({
-            html: `<q2-editable-field editing value="Test Value"></q2-editable-field>`,
-        });
-        editableField = await page.find('q2-editable-field');
-        const inputEventSpy = await editableField.spyOnEvent('input');
-        await dispatchEvent(page, ['q2-editable-field', 'q2-input'], 'input', {
-            detail: { value: 'testValue', formattedValue: 'formattedTestValue' },
-        });
-        expect(inputEventSpy).toHaveReceivedEventDetail({
-            value: 'testValue',
-            formattedValue: 'formattedTestValue',
-        });
-    });
-    it('correctly emits the change event data', async function () {
-        page = await setup({
-            html: `<q2-editable-field editing value="Test Value"></q2-editable-field>`,
-        });
-        editableField = await page.find('q2-editable-field');
-        const changeEventSpy = await editableField.spyOnEvent('change');
-        await dispatchEvent(page, ['q2-editable-field', '.save-edit'], 'click');
-        expect(changeEventSpy).toHaveReceivedEventDetail({
-            value: 'Test Value',
-            editing: false,
-            name: 'save',
-            formattedValue: 'Test Value',
-        });
-        await dispatchEvent(page, ['q2-editable-field', '.begin-edit'], 'click');
-        expect(changeEventSpy).toHaveReceivedEventDetail({ editing: true, name: 'edit' });
-        await dispatchEvent(page, ['q2-editable-field', '.cancel-edit'], 'click');
-        expect(changeEventSpy).toHaveReceivedEventDetail({ editing: false, name: 'cancel' });
-    });
-    it('allows custom handler to control the change event effects', async function () {
-        page = await setup({
-            html: `<q2-editable-field editing value="Test Value"></q2-editable-field>`,
-        });
-        editableField = await page.find('q2-editable-field');
-        let isEditing = await editableField.getProperty('editing');
-        await page.$eval('q2-editable-field', function (editableField) {
-            editableField.onchange = function (e) {
-                // basically don't allow editing value to change via change event
-                e.target.editing = !e.detail.editing;
-            };
-        });
-        await page.waitForChanges();
-        expect(isEditing).toEqual(true);
-        await dispatchEvent(page, ['q2-editable-field', '.save-edit'], 'click');
-        isEditing = await editableField.getProperty('editing');
-        // still editable because onchange event overwrote default behavior
-        expect(isEditing).toEqual(true);
-        // manually set editing to false to test inverse
-        editableField.setProperty('editing', false);
-        await page.waitForChanges();
-        isEditing = await editableField.getProperty('editing');
-        expect(isEditing).toEqual(false);
-        await dispatchEvent(page, ['q2-editable-field', '.begin-edit'], 'click');
-        isEditing = await editableField.getProperty('editing');
-        // still false...
-        expect(isEditing).toEqual(false);
-    });
-    it('triggers change event from Escape and Enter keyboard events', async function () {
-        page = await setup({
-            html: `<q2-editable-field editing value="Test Value"></q2-editable-field>`,
-        });
-        editableField = await page.find('q2-editable-field');
-        const changeEventSpy = await editableField.spyOnEvent('change');
-        await dispatchEvent(page, ['q2-editable-field', 'q2-input'], 'keydown', { key: 'Escape' });
-        expect(changeEventSpy).toHaveReceivedEventDetail({ name: 'cancel', editing: false });
-        await dispatchEvent(page, ['q2-editable-field', '.begin-edit'], 'click');
-        expect(changeEventSpy).toHaveReceivedEventDetail({ name: 'edit', editing: true });
-        await dispatchEvent(page, ['q2-editable-field', 'q2-input'], 'keydown', {
-            key: 'Enter',
-            bubbles: true,
-        });
-        expect(changeEventSpy).toHaveReceivedEventDetail({
-            name: 'save',
-            editing: false,
-            value: 'Test Value',
-            formattedValue: 'Test Value',
-        });
-    });
-    it('shifts focus on editing change', async function () {
-        page = await setup({
-            html: `<q2-editable-field value="Test Value"></q2-editable-field>`,
-        });
-        const editBtn = await page.find('q2-editable-field >>> .begin-edit');
-        const innerInput = await page.find('q2-editable-field >>> q2-input');
-        const inputFocusSpy = await innerInput.spyOnEvent('focus');
-        expect(inputFocusSpy).toHaveReceivedEventTimes(0);
-        await dispatchEvent(page, ['q2-editable-field', '.begin-edit'], 'click');
-        // focus on input when switched to editing state
-        expect(inputFocusSpy).toHaveReceivedEventTimes(2); // 2 because of focus bubbling
-        const editBtnFocusSpy = await editBtn.spyOnEvent('focus');
-        expect(editBtnFocusSpy).toHaveReceivedEventTimes(0);
-        await dispatchEvent(page, ['q2-editable-field', '.save-edit'], 'click');
-        // edit button focused when changed to no longer editing
-        expect(editBtnFocusSpy).toHaveReceivedEventTimes(2); // 2 because of focus bubbling
-    });
     it('localizes appropriate attribute strings', async function () {
         page = await setup({
             html: `<q2-editable-field editing value="Test Value"></q2-editable-field>`,
@@ -203,128 +18,449 @@ describe('q2-editable-field', () => {
             'q2-editable-field.label': 'Label Text',
             'q2-editable-field.ariaLabel': 'Aria-Label Text',
         });
-        const innerInput = await page.find('q2-editable-field >>> q2-input');
+        inputField = await page.find('q2-editable-field >>> q2-input');
         editableField = await page.find('q2-editable-field');
         editableField.setProperty('label', 'q2-editable-field.label');
         await page.waitForChanges();
-        expect(innerInput).toEqualAttribute('label', 'Label Text');
-        expect(innerInput).not.toHaveAttribute('hide-label');
+        expect(inputField).toEqualAttribute('label', 'Label Text');
+        expect(inputField).not.toHaveAttribute('hide-label');
         editableField.setProperty('ariaLabel', 'q2-editable-field.ariaLabel');
         await page.waitForChanges();
-        expect(innerInput).toEqualAttribute('label', 'Aria-Label Text');
-        expect(innerInput).toHaveAttribute('hide-label');
+        expect(inputField).toEqualAttribute('label', 'Aria-Label Text');
+        expect(inputField).toHaveAttribute('hide-label');
     });
-    it('prevents click propagation from interation elements', async function () {
-        page = await setup({
-            html: `<q2-editable-field editing value="Test Value"></q2-editable-field>`,
+    describe('[A11y] guideline compliance', () => {
+        it('Does not have accessibility violations', async () => {
+            page = await setup({
+                html: `<q2-editable-field label="Test Label"></q2-editable-field>`,
+            });
+            const hasViolations = await evaluateA11y(page);
+            expect(hasViolations).toBe(false);
         });
-        editableField = await page.find('q2-editable-field');
-        const clickEventSpy = await editableField.spyOnEvent('click');
-        await dispatchEvent(page, ['q2-editable-field', 'q2-input'], 'click', { composed: true });
-        expect(clickEventSpy).not.toHaveReceivedEvent();
-        await dispatchEvent(page, ['q2-editable-field', '.begin-edit'], 'click', {
-            composed: true,
+    });
+    describe('Rendering', () => {
+        it('should render the component in the dom', async () => {
+            page = await setup({ html: `<q2-editable-field></q2-editable-field>` });
+            editableField = await page.find('q2-editable-field');
+            expect(editableField.tagName).toEqual('Q2-EDITABLE-FIELD');
+            const editStateWrapper = await page.find('q2-editable-field >>> .q2-editable-field-wrapper:nth-child(1)');
+            const readStateWrapper = await page.find('q2-editable-field >>> .q2-editable-field-wrapper:nth-child(2)');
+            // both edit and read states render
+            expect(editStateWrapper).toBeTruthy();
+            expect(readStateWrapper).toBeTruthy();
+        });
+        it('it correctly renders the read state when label not persisted', async () => {
+            page = await setup({
+                html: `<q2-editable-field value="Test Value"></q2-editable-field>`,
+            });
+            const readStateWrapper = await page.find('q2-editable-field >>> .q2-editable-field-wrapper:nth-child(2)');
+            const readStateHidden = await readStateWrapper.getProperty('hidden');
+            const readStateTextWrapper = await page.find('q2-editable-field >>> .text-wrapper');
+            editButton = await page.find('q2-editable-field >>> .begin-edit');
+            expect(readStateHidden).toEqual(false);
+            expect(readStateWrapper).not.toHaveClass('editing');
+            // value rendered into text wrapper
+            expect(readStateTextWrapper.textContent).toEqual('Test Value');
+            // edit button renders
+            expect(editButton).toBeTruthy();
+        });
+        it('it correctly renders the read state when label is persisted', async () => {
+            page = await setup({
+                html: `<q2-editable-field value="Test Value" label="Test Label" persistent-label></q2-editable-field>`,
+            });
+            const readStateWrapper = await page.find('q2-editable-field >>> .q2-editable-field-wrapper:nth-child(2)');
+            expect(readStateWrapper).not.toHaveClass('editing');
+            expect(await readStateWrapper.getProperty('hidden')).toEqual(false);
+            const readStateLabel = await page.find('q2-editable-field >>> .read-state-label');
+            expect(readStateLabel).not.toBeNull;
+            expect(readStateLabel.tagName).toEqual('DT');
+            expect(readStateLabel.textContent).toEqual('Test Label');
+            const readStateTextWrapper = await page.find('q2-editable-field >>> .text-wrapper');
+            // value rendered into text wrapper
+            expect(readStateTextWrapper.textContent).toEqual('Test Value');
+            editButton = await page.find('q2-editable-field >>> .begin-edit');
+            // edit button renders
+            expect(editButton).toBeTruthy();
+        });
+        it('correctly renders the edit state', async () => {
+            page = await setup({
+                html: `<q2-editable-field editing value="Test Value"></q2-editable-field>`,
+            });
+            const editStateWrapper = await page.find('q2-editable-field >>> .q2-editable-field-wrapper:nth-child(1)');
+            inputField = await page.find('q2-editable-field >>> q2-input');
+            expect(editStateWrapper).toHaveClass('editing');
+            // input renders
+            expect(inputField).toBeTruthy();
+            const inputValue = await inputField.getProperty('value');
+            // input value matches element value
+            expect(inputValue).toEqual('Test Value');
+            cancelButton = await page.find('q2-editable-field >>> .cancel-edit');
+            saveButton = await page.find('q2-editable-field >>> .save-edit');
+            expect(cancelButton).toBeTruthy();
+            expect(saveButton).toBeTruthy();
         });
-        expect(clickEventSpy).not.toHaveReceivedEvent();
-        await dispatchEvent(page, ['q2-editable-field', '.cancel-edit'], 'click', {
-            composed: true,
+    });
+    describe('Props', () => {
+        it('passes appropriate properties through to q2-input', async () => {
+            page = await setup({
+                html: `<q2-editable-field editing label="Test Label" type="testType" format-modifier="testFormatModifier" maxlength="10" value="Test Value"></q2-editable-field>`,
+            });
+            editableField = await page.find('q2-editable-field');
+            editableField.setProperty('errors', ['error1', 'error2']);
+            editableField.setProperty('hints', ['hint1', 'hint2']);
+            await page.waitForChanges();
+            inputField = await page.find('q2-editable-field >>> q2-input');
+            const inputType = await inputField.getProperty('type');
+            const inputErrors = await inputField.getProperty('errors');
+            const inputHints = await inputField.getProperty('hints');
+            const inputLabel = await inputField.getProperty('label');
+            const inputFormatter = await inputField.getProperty('formatModifier');
+            const inputMaxLength = await inputField.getProperty('maxlength');
+            expect(inputType).toEqual('testType');
+            expect(inputErrors).toEqual(['error1', 'error2']);
+            expect(inputHints).toEqual(['hint1', 'hint2']);
+            expect(inputLabel).toEqual('Test Label');
+            expect(inputFormatter).toEqual('testFormatModifier');
+            expect(inputMaxLength).toEqual(10);
+            expect(inputField).not.toHaveAttribute('hide-label');
+            editableField.setProperty('ariaLabel', 'Test aria-label');
+            await page.waitForChanges();
+            expect(inputField).toEqualAttribute('label', 'Test aria-label');
+            expect(inputField).toHaveAttribute('hide-label');
         });
-        expect(clickEventSpy).not.toHaveReceivedEvent();
-        await dispatchEvent(page, ['q2-editable-field', '.begin-edit'], 'click', {
-            composed: true,
+        describe('when value and type are provided to q2-editable-field', () => {
+            it('maintains formatted value in q2-input', async () => {
+                page = await setup({
+                    html: `<q2-editable-field type='phone' value='1234567890'></q2-editable-field>`,
+                });
+                inputField = await page.find('q2-editable-field >>> q2-input');
+                const formattedVal = await inputField.getProperty('formattedValue');
+                expect(formattedVal).toBe('(123) 456-7890');
+            });
+            it('displays formattedValue in .text-wrapper on q2-editable-field', async () => {
+                page = await setup({
+                    html: `<q2-editable-field type='phone' value='1234567890'></q2-editable-field>`,
+                });
+                inputField = await page.find('q2-editable-field >>> q2-input');
+                const formattedVal = await inputField.getProperty('formattedValue');
+                const textWrapper = await page.find('q2-editable-field >>> .text-wrapper');
+                expect(formattedVal).toBe(textWrapper.innerText);
+            });
         });
-        expect(clickEventSpy).not.toHaveReceivedEvent();
-        await dispatchEvent(page, ['q2-editable-field', '.save-edit'], 'click', { composed: true });
-        expect(clickEventSpy).not.toHaveReceivedEvent();
-        await dispatchEvent(page, ['q2-editable-field', '.text-wrapper'], 'click', {
-            composed: true,
+        describe('when errors is updated', () => {
+            beforeEach(async () => {
+                page = await setup({
+                    html: `<q2-editable-field value="Test Value" editing></q2-editable-field>`,
+                });
+                editableField = await page.find('q2-editable-field');
+            });
+            describe('when component has focus', () => {
+                it('focuses on input field', async () => {
+                    saveButton = await page.find('q2-editable-field >>> [test-id=saveButton]');
+                    saveButton.focus();
+                    await page.waitForChanges();
+                    expect(await getActiveElementTestId(page)).toEqual('saveButton');
+                    editableField.setProperty('errors', ["It's busted."]);
+                    await page.waitForChanges();
+                    expect(await getActiveElementTestId(page)).toEqual('editableInput');
+                });
+            });
+            describe('when component does not have focus', () => {
+                it('does not change focus', async () => {
+                    expect(await getActiveElementTestId(page)).toBeNull();
+                    editableField.setProperty('errors', ["It's busted."]);
+                    await page.waitForChanges();
+                    expect(await getActiveElementTestId(page)).toBeNull();
+                });
+            });
+            describe('when component is disabled', () => {
+                beforeEach(async () => {
+                    page = await setup({ html: `<q2-editable-field disabled> Hello </q2-editable-field>` });
+                });
+                it('editButton is disabled', async () => {
+                    editableField = await page.find('q2-editable-field');
+                    const spy = await editableField.spyOnEvent('click');
+                    await dispatchEvent(page, ['q2-editable-field', '[test-id="editButton"]'], 'click');
+                    expect(spy).not.toHaveReceivedEvent();
+                });
+                it('editableInput is disabled', async () => {
+                    editableField = await page.find('q2-editable-field');
+                    const spy = await editableField.spyOnEvent('click');
+                    await dispatchEvent(page, ['q2-editable-field', '[test-id="editableInput"]'], 'click');
+                    expect(spy).not.toHaveReceivedEvent();
+                });
+            });
         });
-        expect(clickEventSpy).toHaveReceivedEventTimes(1);
     });
-    it('correctly restore previous value when cancel button clicked', async function () {
-        const defaultValue = 'Default Value';
-        const newValue = 'New Value';
-        page = await setup({
-            html: `<q2-editable-field editing value="${defaultValue}"></q2-editable-field>`,
+    describe('Events', () => {
+        describe('Input', () => {
+            it('correctly bubbles the q2-input input event', async function () {
+                page = await setup({
+                    html: `<q2-editable-field editing value="Test Value"></q2-editable-field>`,
+                });
+                editableField = await page.find('q2-editable-field');
+                const inputEventSpy = await editableField.spyOnEvent('input');
+                await dispatchEvent(page, ['q2-editable-field', 'q2-input'], 'input', {
+                    detail: { value: 'testValue', formattedValue: 'formattedTestValue' },
+                });
+                expect(inputEventSpy).toHaveReceivedEventDetail({
+                    value: 'testValue',
+                    formattedValue: 'formattedTestValue',
+                });
+            });
         });
-        const innerInput = await page.find('q2-editable-field >>> q2-input');
-        let inputValue = await innerInput.getProperty('value');
-        // input value matches element value
-        expect(inputValue).toEqual(defaultValue);
-        await dispatchEvent(page, ['q2-editable-field', '.begin-edit'], 'click');
-        innerInput.setProperty('value', newValue);
-        await page.waitForChanges();
-        inputValue = await innerInput.getProperty('value');
-        expect(inputValue).toEqual(newValue);
-        await dispatchEvent(page, ['q2-editable-field', '.cancel-edit'], 'click');
-        inputValue = await innerInput.getProperty('value');
-        await page.waitForChanges();
-        expect(inputValue).toEqual(defaultValue);
-    });
-    it('correctly restore previous value when calcel button clicked and save button clicked', async function () {
-        const defaultValue = 'Default Value';
-        const newValue = 'New Value';
-        page = await setup({
-            html: `<q2-editable-field editing value="${defaultValue}"></q2-editable-field>`,
+        describe('Change', () => {
+            it('correctly emits the change event data', async function () {
+                page = await setup({
+                    html: `<q2-editable-field editing value="Test Value"></q2-editable-field>`,
+                });
+                editableField = await page.find('q2-editable-field');
+                const changeEventSpy = await editableField.spyOnEvent('change');
+                await dispatchEvent(page, ['q2-editable-field', '.save-edit'], 'click');
+                expect(changeEventSpy).toHaveReceivedEventDetail({
+                    value: 'Test Value',
+                    editing: false,
+                    name: 'save',
+                    formattedValue: 'Test Value',
+                });
+                await dispatchEvent(page, ['q2-editable-field', '.begin-edit'], 'click');
+                expect(changeEventSpy).toHaveReceivedEventDetail({ editing: true, name: 'edit' });
+                await dispatchEvent(page, ['q2-editable-field', '.cancel-edit'], 'click');
+                expect(changeEventSpy).toHaveReceivedEventDetail({ editing: false, name: 'cancel' });
+            });
+            it('allows custom handler to control the change event effects', async function () {
+                page = await setup({
+                    html: `<q2-editable-field editing value="Test Value"></q2-editable-field>`,
+                });
+                editableField = await page.find('q2-editable-field');
+                let isEditing = await editableField.getProperty('editing');
+                await page.$eval('q2-editable-field', function (editableField) {
+                    editableField.onchange = function (e) {
+                        // basically don't allow editing value to change via change event
+                        e.target.editing = !e.detail.editing;
+                    };
+                });
+                await page.waitForChanges();
+                expect(isEditing).toEqual(true);
+                await dispatchEvent(page, ['q2-editable-field', '.save-edit'], 'click');
+                isEditing = await editableField.getProperty('editing');
+                // still editable because onchange event overwrote default behavior
+                expect(isEditing).toEqual(true);
+                // manually set editing to false to test inverse
+                editableField.setProperty('editing', false);
+                await page.waitForChanges();
+                isEditing = await editableField.getProperty('editing');
+                expect(isEditing).toEqual(false);
+                await dispatchEvent(page, ['q2-editable-field', '.begin-edit'], 'click');
+                isEditing = await editableField.getProperty('editing');
+                // still false...
+                expect(isEditing).toEqual(false);
+            });
+            it('triggers change event from Escape and Enter keyboard events', async function () {
+                page = await setup({
+                    html: `<q2-editable-field editing value="Test Value"></q2-editable-field>`,
+                });
+                editableField = await page.find('q2-editable-field');
+                const changeEventSpy = await editableField.spyOnEvent('change');
+                await dispatchEvent(page, ['q2-editable-field', 'q2-input'], 'keydown', { key: 'Escape' });
+                expect(changeEventSpy).toHaveReceivedEventDetail({ name: 'cancel', editing: false });
+                await dispatchEvent(page, ['q2-editable-field', '.begin-edit'], 'click');
+                expect(changeEventSpy).toHaveReceivedEventDetail({ name: 'edit', editing: true });
+                await dispatchEvent(page, ['q2-editable-field', 'q2-input'], 'keydown', {
+                    key: 'Enter',
+                    bubbles: true,
+                });
+                expect(changeEventSpy).toHaveReceivedEventDetail({
+                    name: 'save',
+                    editing: false,
+                    value: 'Test Value',
+                    formattedValue: 'Test Value',
+                });
+            });
         });
-        const innerInput = await page.find('q2-editable-field >>> q2-input');
-        let inputValue;
-        await dispatchEvent(page, ['q2-editable-field', '.begin-edit'], 'click');
-        innerInput.setProperty('value', newValue);
-        await page.waitForChanges();
-        inputValue = await innerInput.getProperty('value');
-        expect(inputValue).toEqual(newValue);
-        // should not save after cancel buton clicked
-        await dispatchEvent(page, ['q2-editable-field', '.cancel-edit'], 'click');
-        inputValue = await innerInput.getProperty('value');
-        await page.waitForChanges();
-        expect(inputValue).toEqual(defaultValue);
-        await dispatchEvent(page, ['q2-editable-field', '.begin-edit'], 'click');
-        inputValue = await innerInput.getProperty('value');
-        await page.waitForChanges();
-        expect(inputValue).toEqual(defaultValue);
-        await dispatchEvent(page, ['q2-editable-field', '.save-edit'], 'click');
-        inputValue = await innerInput.getProperty('value');
-        await page.waitForChanges();
-        expect(inputValue).toEqual(defaultValue);
-    });
-    it('correctly restore previous value when escape key pressed', async function () {
-        const defaultValue = 'Default Value';
-        const newValue = 'New Value';
-        page = await setup({
-            html: `<q2-editable-field editing value="${defaultValue}"></q2-editable-field>`,
+        describe('Click', () => {
+            it('prevents click propagation from internal elements', async function () {
+                page = await setup({
+                    html: `<q2-editable-field editing value="Test Value"></q2-editable-field>`,
+                });
+                editableField = await page.find('q2-editable-field');
+                const clickEventSpy = await editableField.spyOnEvent('click');
+                await dispatchEvent(page, ['q2-editable-field', 'q2-input'], 'click', { composed: true });
+                expect(clickEventSpy).not.toHaveReceivedEvent();
+                await dispatchEvent(page, ['q2-editable-field', '.begin-edit'], 'click', {
+                    composed: true,
+                });
+                expect(clickEventSpy).not.toHaveReceivedEvent();
+                await dispatchEvent(page, ['q2-editable-field', '.cancel-edit'], 'click', {
+                    composed: true,
+                });
+                expect(clickEventSpy).not.toHaveReceivedEvent();
+                await dispatchEvent(page, ['q2-editable-field', '.begin-edit'], 'click', {
+                    composed: true,
+                });
+                expect(clickEventSpy).not.toHaveReceivedEvent();
+                await dispatchEvent(page, ['q2-editable-field', '.save-edit'], 'click', { composed: true });
+                expect(clickEventSpy).not.toHaveReceivedEvent();
+                await dispatchEvent(page, ['q2-editable-field', '.text-wrapper'], 'click', {
+                    composed: true,
+                });
+                expect(clickEventSpy).toHaveReceivedEventTimes(1);
+            });
+            describe('when save button is clicked', () => {
+                beforeEach(async () => {
+                    page = await setup({
+                        html: `<q2-editable-field value="Test Value" editing></q2-editable-field>`,
+                    });
+                    editableField = await page.find('q2-editable-field');
+                });
+                describe('when there are errors', () => {
+                    it('maintains edit state and focuses the input field', async () => {
+                        editableField.setProperty('errors', ["It's busted."]);
+                        await page.waitForChanges();
+                        saveButton = await page.find('q2-editable-field >>> [test-id=saveButton]');
+                        await saveButton.focus();
+                        expect(await getActiveElementTestId(page)).toEqual('saveButton');
+                        await saveButton.click();
+                        expect(await getActiveElementTestId(page)).toEqual('editableInput');
+                    });
+                });
+                describe('when there are not errors', () => {
+                    it('closes the edit state and focuses the edit button', async () => {
+                        saveButton = await page.find('q2-editable-field >>> [test-id=saveButton]');
+                        await saveButton.focus();
+                        expect(await getActiveElementTestId(page)).toEqual('saveButton');
+                        await saveButton.click();
+                        editableField = await page.find('q2-editable-field');
+                        expect(await editableField.getAttribute('editable')).toBeFalsy();
+                        expect(await getActiveElementTestId(page)).toEqual('editButton');
+                    });
+                });
+            });
+        });
+        describe('Focus', () => {
+            describe('when invoked directly', () => {
+                describe('when in default mode', () => {
+                    beforeEach(async () => {
+                        page = await setup({
+                            html: `<q2-editable-field value="Test Value"></q2-editable-field>`,
+                        });
+                        editableField = await page.find('q2-editable-field');
+                    });
+                    it('focuses edit button on event dispatch', async () => {
+                        await dispatchEvent(page, ['q2-editable-field'], 'focus');
+                        expect(await getActiveElementTestId(page)).toEqual('editButton');
+                    });
+                    it('focuses edit button when method called', async () => {
+                        await editableField.focus();
+                        await page.waitForChanges();
+                        expect(await getActiveElementTestId(page)).toEqual('editButton');
+                    });
+                });
+                describe('when in edit mode', () => {
+                    beforeEach(async () => {
+                        page = await setup({
+                            html: `<q2-editable-field value="Test Value" editing></q2-editable-field>`,
+                        });
+                        editableField = await page.find('q2-editable-field');
+                    });
+                    it('focuses input on event dispatch', async () => {
+                        await page.waitForChanges();
+                        await dispatchEvent(page, ['q2-editable-field'], 'focus');
+                        expect(await getActiveElementTestId(page)).toEqual('editableInput');
+                    });
+                    it('focuses input when method called', async () => {
+                        await editableField.focus();
+                        await page.waitForChanges();
+                        expect(await getActiveElementTestId(page)).toEqual('editableInput');
+                    });
+                });
+            });
+            it('shifts focus on editing change', async function () {
+                page = await setup({
+                    html: `<q2-editable-field value="Test Value"></q2-editable-field>`,
+                });
+                editButton = await page.find('q2-editable-field >>> .begin-edit');
+                inputField = await page.find('q2-editable-field >>> q2-input');
+                const inputFocusSpy = await inputField.spyOnEvent('focus');
+                expect(inputFocusSpy).toHaveReceivedEventTimes(0);
+                await dispatchEvent(page, ['q2-editable-field', '.begin-edit'], 'click');
+                // focus on input when switched to editing state
+                expect(inputFocusSpy).toHaveReceivedEventTimes(2); // 2 because of focus bubbling
+                const editBtnFocusSpy = await editButton.spyOnEvent('focus');
+                expect(editBtnFocusSpy).toHaveReceivedEventTimes(0);
+                await dispatchEvent(page, ['q2-editable-field', '.save-edit'], 'click');
+                // edit button focused when changed to no longer editing
+                expect(editBtnFocusSpy).toHaveReceivedEventTimes(2); // 2 because of focus bubbling
+            });
         });
-        const innerInput = await page.find('q2-editable-field >>> q2-input');
-        let inputValue = await innerInput.getProperty('value');
-        // input value matches element value
-        expect(inputValue).toEqual(defaultValue);
-        await dispatchEvent(page, ['q2-editable-field', '.begin-edit'], 'click');
-        innerInput.setProperty('value', newValue);
-        await page.waitForChanges();
-        inputValue = await innerInput.getProperty('value');
-        expect(inputValue).toEqual(newValue);
-        await dispatchEvent(page, ['q2-editable-field', 'q2-input'], 'keydown', { key: 'Escape' });
-        inputValue = await innerInput.getProperty('value');
-        await page.waitForChanges();
-        expect(inputValue).toEqual(defaultValue);
     });
-    describe('when value and type are provided to q2-editable-field', () => {
-        it('maintains formatted value in q2-input', async () => {
+    describe('Keyboard input', () => {
+        it('correctly restores previous value when cancel button clicked', async function () {
+            const defaultValue = 'Default Value';
+            const newValue = 'New Value';
+            page = await setup({
+                html: `<q2-editable-field editing value="${defaultValue}"></q2-editable-field>`,
+            });
+            inputField = await page.find('q2-editable-field >>> q2-input');
+            let inputValue = await inputField.getProperty('value');
+            // input value matches element value
+            expect(inputValue).toEqual(defaultValue);
+            await dispatchEvent(page, ['q2-editable-field', '.begin-edit'], 'click');
+            inputField.setProperty('value', newValue);
+            await page.waitForChanges();
+            inputValue = await inputField.getProperty('value');
+            expect(inputValue).toEqual(newValue);
+            await dispatchEvent(page, ['q2-editable-field', '.cancel-edit'], 'click');
+            inputValue = await inputField.getProperty('value');
+            await page.waitForChanges();
+            expect(inputValue).toEqual(defaultValue);
+        });
+        it('correctly restores previous value when cancel button clicked and save button clicked', async function () {
+            const defaultValue = 'Default Value';
+            const newValue = 'New Value';
             page = await setup({
-                html: `<q2-editable-field type='phone' value='1234567890'></q2-editable-field>`,
+                html: `<q2-editable-field editing value="${defaultValue}"></q2-editable-field>`,
             });
-            const q2Input = await page.find('q2-editable-field >>> q2-input');
-            const formattedVal = await q2Input.getProperty('formattedValue');
-            expect(formattedVal).toBe('(123) 456-7890');
+            inputField = await page.find('q2-editable-field >>> q2-input');
+            let inputValue;
+            await dispatchEvent(page, ['q2-editable-field', '.begin-edit'], 'click');
+            inputField.setProperty('value', newValue);
+            await page.waitForChanges();
+            inputValue = await inputField.getProperty('value');
+            expect(inputValue).toEqual(newValue);
+            // should not save after cancel buton clicked
+            await dispatchEvent(page, ['q2-editable-field', '.cancel-edit'], 'click');
+            inputValue = await inputField.getProperty('value');
+            await page.waitForChanges();
+            expect(inputValue).toEqual(defaultValue);
+            await dispatchEvent(page, ['q2-editable-field', '.begin-edit'], 'click');
+            inputValue = await inputField.getProperty('value');
+            await page.waitForChanges();
+            expect(inputValue).toEqual(defaultValue);
+            await dispatchEvent(page, ['q2-editable-field', '.save-edit'], 'click');
+            inputValue = await inputField.getProperty('value');
+            await page.waitForChanges();
+            expect(inputValue).toEqual(defaultValue);
         });
-        it('displays formattedValue in .text-wrapper on q2-editable-field', async () => {
+        it('correctly restores previous value when escape key pressed', async function () {
+            const defaultValue = 'Default Value';
+            const newValue = 'New Value';
             page = await setup({
-                html: `<q2-editable-field type='phone' value='1234567890'></q2-editable-field>`,
+                html: `<q2-editable-field editing value="${defaultValue}"></q2-editable-field>`,
             });
-            const q2Input = await page.find('q2-editable-field >>> q2-input');
-            const formattedVal = await q2Input.getProperty('formattedValue');
-            const textWrapper = await page.find('q2-editable-field >>> .text-wrapper');
-            expect(formattedVal).toBe(textWrapper.innerText);
+            inputField = await page.find('q2-editable-field >>> q2-input');
+            let inputValue = await inputField.getProperty('value');
+            // input value matches element value
+            expect(inputValue).toEqual(defaultValue);
+            await dispatchEvent(page, ['q2-editable-field', '.begin-edit'], 'click');
+            inputField.setProperty('value', newValue);
+            await page.waitForChanges();
+            inputValue = await inputField.getProperty('value');
+            expect(inputValue).toEqual(newValue);
+            await dispatchEvent(page, ['q2-editable-field', 'q2-input'], 'keydown', { key: 'Escape' });
+            inputValue = await inputField.getProperty('value');
+            await page.waitForChanges();
+            expect(inputValue).toEqual(defaultValue);
         });
     });
     describe('Methods', () => {
@@ -344,7 +480,7 @@ describe('q2-editable-field', () => {
                 expect(editButtonClickSpy).toHaveReceivedEventTimes(0);
                 expect(await editableField.getProperty('editing')).toEqual(false);
                 await editableField.callMethod('clickEdit');
-                page.waitForChanges();
+                await page.waitForChanges();
                 expect(editButtonClickSpy).toHaveReceivedEventTimes(1);
                 expect(await editableField.getProperty('editing')).toEqual(true);
                 expect(await getActiveElementTestId(page)).toEqual('editableInput');
@@ -356,7 +492,7 @@ describe('q2-editable-field', () => {
                 expect(editButtonClickSpy).toHaveReceivedEventTimes(0);
                 expect(await editableField.getProperty('editing')).toEqual(true);
                 await editableField.callMethod('clickEdit');
-                page.waitForChanges();
+                await page.waitForChanges();
                 expect(editButtonClickSpy).toHaveReceivedEventTimes(0);
                 expect(await editableField.getProperty('editing')).toEqual(true);
             });
@@ -369,7 +505,7 @@ describe('q2-editable-field', () => {
                 expect(cancelButtonClickSpy).toHaveReceivedEventTimes(0);
                 expect(await editableField.getProperty('editing')).toEqual(true);
                 await editableField.callMethod('clickCancel');
-                page.waitForChanges();
+                await page.waitForChanges();
                 expect(cancelButtonClickSpy).toHaveReceivedEventTimes(1);
                 expect(await editableField.getProperty('editing')).toEqual(false);
                 expect(await getActiveElementTestId(page)).toEqual('editButton');
@@ -379,20 +515,20 @@ describe('q2-editable-field', () => {
                 expect(cancelButtonClickSpy).toHaveReceivedEventTimes(0);
                 expect(await editableField.getProperty('editing')).toEqual(false);
                 await editableField.callMethod('clickCancel');
-                page.waitForChanges();
+                await page.waitForChanges();
                 expect(cancelButtonClickSpy).toHaveReceivedEventTimes(0);
                 expect(await editableField.getProperty('editing')).toEqual(false);
             });
         });
         describe('clickSave', () => {
             it('clicks the save button and exits editing mode', async () => {
-                await editableField.setProperty('editing', true);
+                editableField.setProperty('editing', true);
                 await page.waitForChanges();
                 const saveButtonClickSpy = await saveButton.spyOnEvent('click');
                 expect(saveButtonClickSpy).toHaveReceivedEventTimes(0);
                 expect(await editableField.getProperty('editing')).toEqual(true);
                 await editableField.callMethod('clickSave');
-                page.waitForChanges();
+                await page.waitForChanges();
                 expect(saveButtonClickSpy).toHaveReceivedEventTimes(1);
                 expect(await editableField.getProperty('editing')).toEqual(false);
                 expect(await getActiveElementTestId(page)).toEqual('editButton');
@@ -402,7 +538,7 @@ describe('q2-editable-field', () => {
                 expect(saveButtonClickSpy).toHaveReceivedEventTimes(0);
                 expect(await editableField.getProperty('editing')).toEqual(false);
                 await editableField.callMethod('clickSave');
-                page.waitForChanges();
+                await page.waitForChanges();
                 expect(saveButtonClickSpy).toHaveReceivedEventTimes(0);
                 expect(await editableField.getProperty('editing')).toEqual(false);
             });
@@ -416,7 +552,7 @@ describe('q2-editable-field', () => {
                 expect(await editableField.getProperty('editing')).toEqual(false);
                 const newValue = 'New Value';
                 await editableField.callMethod('setValue', newValue);
-                page.waitForChanges();
+                await page.waitForChanges();
                 expect(editButtonClickSpy).toHaveReceivedEventTimes(1);
                 expect(saveButtonClickSpy).toHaveReceivedEventTimes(1);
                 expect(await editableField.getProperty('editing')).toEqual(false);
@@ -433,7 +569,7 @@ describe('q2-editable-field', () => {
                 expect(await editableField.getProperty('editing')).toEqual(false);
                 const newValue = 'New Value';
                 await editableField.callMethod('setValue', newValue, { clickSave: false });
-                page.waitForChanges();
+                await page.waitForChanges();
                 expect(editButtonClickSpy).toHaveReceivedEventTimes(1);
                 expect(saveButtonClickSpy).toHaveReceivedEventTimes(0);
                 expect(await editableField.getProperty('editing')).toEqual(true);
@@ -444,125 +580,7 @@ describe('q2-editable-field', () => {
             });
         });
     });
-    describe('focus', () => {
-        describe('when invoked directly', () => {
-            describe('when in default mode', () => {
-                beforeEach(async () => {
-                    page = await setup({
-                        html: `<q2-editable-field value="Test Value"></q2-editable-field>`,
-                    });
-                    editableField = await page.find('q2-editable-field');
-                });
-                it('focuses edit button on event dispatch', async () => {
-                    await dispatchEvent(page, ['q2-editable-field'], 'focus');
-                    expect(await getActiveElementTestId(page)).toEqual('editButton');
-                });
-                it('focuses edit button when method called', async () => {
-                    await editableField.focus();
-                    await page.waitForChanges();
-                    expect(await getActiveElementTestId(page)).toEqual('editButton');
-                });
-            });
-            describe('when in edit mode', () => {
-                beforeEach(async () => {
-                    page = await setup({
-                        html: `<q2-editable-field value="Test Value" editing></q2-editable-field>`,
-                    });
-                    editableField = await page.find('q2-editable-field');
-                });
-                it('focuses input on event dispatch', async () => {
-                    await page.waitForChanges();
-                    await dispatchEvent(page, ['q2-editable-field'], 'focus');
-                    expect(await getActiveElementTestId(page)).toEqual('editableInput');
-                });
-                it('focuses input when method called', async () => {
-                    await editableField.focus();
-                    await page.waitForChanges();
-                    expect(await getActiveElementTestId(page)).toEqual('editableInput');
-                });
-            });
-        });
-        describe('when save is clicked', () => {
-            let editableField;
-            beforeEach(async () => {
-                page = await setup({
-                    html: `<q2-editable-field value="Test Value" editing onchange="() => {}"></q2-editable-field>`,
-                });
-                editableField = await page.find('q2-editable-field');
-            });
-            describe('when there are errors', () => {
-                beforeEach(async () => {
-                    await editableField.setProperty('errors', ["It's busted."]);
-                    await page.waitForChanges();
-                });
-                it('focuses the input field', async () => {
-                    await page.waitForChanges();
-                    const saveBtn = await page.find('q2-editable-field >>> [test-id=saveButton]');
-                    await saveBtn.focus();
-                    await dispatchEvent(page, ['q2-editable-field', '[test-id=saveButton]'], 'click');
-                    expect(await getActiveElementTestId(page)).toEqual('editableInput');
-                });
-            });
-            describe('when there are not errors', () => {
-                it('does not change focus', async () => {
-                    const saveBtn = await page.find('q2-editable-field >>> [test-id=saveButton]');
-                    await saveBtn.focus();
-                    expect(await getActiveElementTestId(page)).toEqual('saveButton');
-                    await dispatchEvent(page, ['q2-editable-field', '[test-id=saveButton]'], 'click');
-                    expect(await getActiveElementTestId(page)).toEqual('saveButton');
-                });
-            });
-        });
-        describe('when errors is updated', () => {
-            beforeEach(async () => {
-                page = await setup({
-                    html: `<q2-editable-field value="Test Value" editing onchange="() => {}"></q2-editable-field>`,
-                });
-                editableField = await page.find('q2-editable-field');
-            });
-            describe('when component has focus', () => {
-                beforeEach(async () => {
-                    const saveBtn = await page.find('q2-editable-field >>> [test-id=saveButton]');
-                    await saveBtn.focus();
-                    await page.waitForChanges();
-                });
-                it('focuses on input field', async () => {
-                    expect(await getActiveElementTestId(page)).toEqual('saveButton');
-                    await editableField.setProperty('errors', ["It's busted."]);
-                    await page.waitForChanges();
-                    expect(await getActiveElementTestId(page)).toEqual('editableInput');
-                });
-            });
-            describe('when component does not have focus', () => {
-                it('does not change focus', async () => {
-                    expect(await getActiveElementTestId(page)).toBeNull();
-                    await editableField.setProperty('errors', ["It's busted."]);
-                    await page.waitForChanges();
-                    expect(await getActiveElementTestId(page)).toBeNull();
-                });
-            });
-            describe('when component is disabled', () => {
-                beforeEach(async () => {
-                    page = await setup({ html: `<q2-editable-field disabled> Hello </q2-editable-field>` });
-                });
-                it('editButton is disabled', async () => {
-                    const el = await page.find('q2-editable-field');
-                    const spy = await el.spyOnEvent('click');
-                    await dispatchEvent(page, ['q2-editable-field', '[test-id="editButton"]'], 'click');
-                    expect(spy).not.toHaveReceivedEvent();
-                });
-                it('editableInput is disabled', async () => {
-                    const el = await page.find('q2-editable-field');
-                    const spy = await el.spyOnEvent('click');
-                    await dispatchEvent(page, ['q2-editable-field', '[test-id="editableInput"]'], 'click');
-                    expect(spy).not.toHaveReceivedEvent();
-                });
-            });
-        });
-    });
     describe('display block', () => {
-        let page;
-        let editableField;
         describe('when block property is provided', () => {
             beforeEach(async () => {
                 page = await setup({
@@ -594,9 +612,9 @@ describe('q2-editable-field', () => {
             });
             await page.waitForChanges();
             await testDeprecatedAriaLabel(await page.find('q2-editable-field'), label);
-            const innerInput = await page.find('q2-editable-field >>> q2-input');
-            expect(innerInput).toEqualAttribute('label', label);
-            expect(innerInput).toHaveAttribute('hide-label');
+            inputField = await page.find('q2-editable-field >>> q2-input');
+            expect(inputField).toEqualAttribute('label', label);
+            expect(inputField).toHaveAttribute('hide-label');
         });
     });
 });