q2-tecton-elements 1.50.1 → 1.51.1

package/dist/collection/components/q2-select/test/q2-select-test.e2e.js

@@ -24,20 +24,6 @@ describe('q2-select', () => {
     const getFocusedValue = async (page) => {
         return page.$eval('body', () => document.activeElement.getAttribute('value'));
     };
-    describe('[A11y] guideline compliance', () => {
-        it('Does not have accessibility violations with only label', async () => {
-            const page = await setup({
-                html: `
-                    <q2-select label="Test" value="option-1">
-                        <q2-option value="option-1" display="Option Text">Option Text</q2-option>
-                        <q2-option value="option-2" display="Option Text">Option Text</q2-option>
-                    </q2-select>
-                `,
-            });
-            const hasViolations = await evaluateA11y(page);
-            expect(hasViolations).toBe(false);
-        });
-    });
     it('properly compiles CSS vars and functions', async () => {
         const page = await setup({ html: '<q2-select></q2-select>' });
         expect(await getListOfStyleCompilationIssues(page, 'q2-select')).toHaveLength(0);
@@ -1603,6 +1589,21 @@ describe('q2-select', () => {
                 expect(await popover.getProperty('mode')).toEqual('legacy');
             });
         });
+        describe('popoverMaxHeight', () => {
+            it('when provided, passes the value to q2-popover', async () => {
+                page = await setup({
+                    html: `
+                        <q2-select popover-max-height="600">
+                            <q2-option value="option-1" display="Option 1 Text">Option 1 Text</q2-option>
+                            <q2-option value="option-2" display="Option 2 Text">Option 2 Text</q2-option>
+                            <q2-option value="option-3" display="Option 3 Text">Option 3 Text</q2-option>
+                        </q2-select>
+                    `,
+                });
+                popover = await page.find('q2-select >>> q2-popover');
+                expect(await popover.getProperty('maxHeight')).toEqual(600);
+            });
+        });
     });
     describe('robust content', () => {
         beforeEach(async () => {
@@ -1837,278 +1838,366 @@ describe('q2-select', () => {
             });
         });
     });
-    describe('Keyboard', () => {
-        let options;
-        const isInputFocused = async (page) => {
-            return page.$eval('body', () => document.activeElement.shadowRoot.activeElement.tagName === 'Q2-INPUT');
-        };
-        const isBodyFocused = async (page) => {
-            return page.$eval('body', () => document.activeElement.tagName === 'BODY');
-        };
-        beforeEach(async () => {
-            jest.setTimeout(5000);
-            page = await setup({
-                html: `
-                    <q2-select>
-                        <q2-option value="1" display="Option 1">Option 1</q2-option>
-                        <q2-option value="2" display="Option 2">Option 2</q2-option>
-                        <q2-option value="3" display="Option 3">Option 3</q2-option>
-                        <q2-option value="4" display="Option 4">Option 4</q2-option>
-                        <q2-option value="5" display="Option 5">Option 5</q2-option>
-                        <q2-option value="6" display="Option 6">Option 6</q2-option>
-                        <q2-option value="7" display="Option 7">Option 7</q2-option>
-                        <q2-option value="8" display="Option 8">Option 8</q2-option>
-                        <q2-option value="9" display="Option 9">Option 9</q2-option>
-                        <q2-option value="10" display="Option 10">Option 10</q2-option>
-                        <q2-option value="11" display="Option 11">Option 11</q2-option>
-                        <q2-option value="12" display="Option 12">Option 12</q2-option>
-                        <q2-option value="13" display="Option 13">Option 13</q2-option>
-                        <q2-option value="14" display="Option 14">Option 14</q2-option>
-                        <q2-option value="15" display="Option 15">Option 15</q2-option>
-                    </q2-select>`,
-            });
-            await page.waitForChanges();
-            select = await page.find('q2-select');
-            input = await page.find('q2-select >>> q2-input');
-            popover = await page.find('q2-select >>> q2-popover');
-            options = await page.findAll('q2-option');
-        });
-        describe('when input has focus', () => {
-            beforeEach(async () => {
-                await input.focus();
+    describe('Updating option list', () => {
+        describe('when multiple is false', () => {
+            it('does not modify the value when the selected option is removed', async () => {
+                page = await setup({
+                    html: `
+                        <q2-select label="States" value="AK">
+                            <q2-option value="AL" display="Alabama">Alabama</q2-option>
+                            <q2-option value="AZ" display="Arizona">Arizona</q2-option>
+                            <q2-option value="AR" display="Arkansas">Arkansas</q2-option>
+                            <q2-option value="AK" display="Alaska" selected>Alaska</q2-option>
+                        </q2-select>
+                    `,
+                });
+                select = await page.find('q2-select');
+                input = await page.find('q2-select >>> q2-input');
+                const alaskaSelector = 'q2-option[value="AK"]';
+                let option = await page.find(alaskaSelector);
+                expect(option).toHaveAttribute('selected');
+                expect(await select.getProperty('value')).toEqual('AK');
+                expect(await input.getProperty('value')).toEqual('Alaska');
+                await page.$eval(alaskaSelector, element => element.remove());
+                await page.waitForChanges();
+                option = await page.find(alaskaSelector);
+                expect(option).toBeNull();
+                expect(await select.getProperty('value')).toEqual('AK');
+                expect(await input.getProperty('value')).toEqual('Alaska');
             });
-            it('opens the dropdown, and moves focus to default option on ArrowDown', async () => {
-                expect(await popover.getProperty('open')).toBe(false);
-                await input.press('ArrowDown');
-                expect(await popover.getProperty('open')).toBe(true);
-                const firstOption = options[0];
-                expect(firstOption).toHaveAttribute('active');
-                expect(await getFocusedOptionValue(page)).toEqual(firstOption.getAttribute('value'));
+            it('marks a newly added option as selected if it matches the value', async () => {
+                page = await setup({
+                    html: `
+                        <q2-select label="States" value="CA">
+                            <q2-option value="AL" display="Alabama">Alabama</q2-option>
+                            <q2-option value="AZ" display="Arizona">Arizona</q2-option>
+                            <q2-option value="AR" display="Arkansas">Arkansas</q2-option>
+                            <q2-option value="AK" display="Alaska" selected>Alaska</q2-option>
+                        </q2-select>
+                    `,
+                });
+                await page.waitForChanges();
+                select = await page.find('q2-select');
+                input = await page.find('q2-select >>> q2-input');
+                await page.waitForChanges();
+                expect(await select.getProperty('value')).toEqual('CA');
+                expect(await input.getProperty('value')).toEqual('CA');
+                await page.evaluate(() => {
+                    const option = document.createElement('q2-option');
+                    option.value = 'CA';
+                    option.display = 'California';
+                    option.textContent = 'California';
+                    return document.querySelector('q2-select').appendChild(option);
+                });
+                await page.waitForChanges();
+                const californiaSelector = 'q2-option[value="CA"]';
+                const option = await page.find(californiaSelector);
+                expect(option).toHaveAttribute('selected');
+                expect(await select.getProperty('value')).toEqual('CA');
+                expect(await input.getProperty('value')).toEqual('CA');
             });
-            it('opens the dropdown, and moves focus to last option on ArrowUp', async () => {
-                expect(await popover.getProperty('open')).toBe(false);
-                await input.press('ArrowUp');
+        });
+        describe('when multiple is true', () => {
+            it('does not modify selectedOptions when a selected option is removed', async () => {
+                page = await setup({
+                    html: `
+                        <q2-select label="States" multiple>
+                            <q2-option value="AL" display="Alabama">Alabama</q2-option>
+                            <q2-option value="AZ" display="Arizona">Arizona</q2-option>
+                            <q2-option value="AR" display="Arkansas">Arkansas</q2-option>
+                            <q2-option value="AK" display="Alaska">Alaska</q2-option>
+                        </q2-select>
+                    `,
+                });
+                select = await page.find('q2-select');
+                input = await page.find('q2-select >>> q2-input');
+                options = await page.findAll('q2-option');
+                await select.setProperty('selectedOptions', ['AL', 'AZ']);
                 await page.waitForChanges();
-                expect(await popover.getProperty('open')).toBe(true);
-                const lastOption = options[options.length - 1];
-                expect(lastOption).toHaveAttribute('active');
-                expect(await getFocusedOptionValue(page)).toEqual(lastOption.getAttribute('value'));
+                let selectedOptions = await page.findAll('q2-option[selected]');
+                expect(selectedOptions.length).toBe(2);
+                expect(options.length).toBe(4);
+                expect(await input.getProperty('value')).toEqual('Alabama');
+                const alabamaSelector = 'q2-option[value="AL"]';
+                await page.$eval(alabamaSelector, element => element.remove());
+                await page.waitForChanges();
+                const alabamaOption = await page.find(alabamaSelector);
+                expect(alabamaOption).toBeNull();
+                expect(await select.getProperty('selectedOptions')).toEqual(['AL', 'AZ']);
+                expect(await input.getProperty('value')).toEqual('Alabama');
+                options = await page.findAll('q2-option');
+                expect(options.length).toBe(3);
+                selectedOptions = await page.findAll('q2-option[selected]');
+                expect(selectedOptions.length).toBe(1);
             });
-            it('opens the dropdown on Space', async () => {
-                expect(await popover.getProperty('open')).toBe(false);
-                await input.press('Space');
+            it('marks a newly added option as selected if it matches a selectedOptions value', async () => {
+                page = await setup({
+                    html: `
+                        <q2-select label="States" multiple>
+                            <q2-option value="AL" display="Alabama">Alabama</q2-option>
+                            <q2-option value="AZ" display="Arizona">Arizona</q2-option>
+                            <q2-option value="AR" display="Arkansas">Arkansas</q2-option>
+                            <q2-option value="AK" display="Alaska" selected>Alaska</q2-option>
+                        </q2-select>
+                    `,
+                });
+                select = await page.find('q2-select');
+                input = await page.find('q2-select >>> q2-input');
+                options = await page.findAll('q2-option');
+                await select.setProperty('selectedOptions', ['AL', 'CA']);
                 await page.waitForChanges();
-                expect(await popover.getProperty('open')).toBe(true);
+                let selectedOptions = await page.findAll('q2-option[selected]');
+                expect(selectedOptions.length).toBe(1);
+                expect(options.length).toBe(4);
+                expect(await input.getProperty('value')).toEqual('Alabama');
+                await page.evaluate(() => {
+                    const option = document.createElement('q2-option');
+                    option.value = 'CA';
+                    option.display = 'California';
+                    option.textContent = 'California';
+                    return document.querySelector('q2-select').appendChild(option);
+                });
+                await page.waitForChanges();
+                const californiaSelector = 'q2-option[value="CA"]';
+                const option = await page.find(californiaSelector);
+                expect(option).toHaveAttribute('selected');
+                expect(await select.getProperty('selectedOptions')).toEqual(['AL', 'CA']);
+                expect(await input.getProperty('value')).toEqual('Alabama');
+                options = await page.findAll('q2-option');
+                expect(options.length).toBe(5);
+                selectedOptions = await page.findAll('q2-option[selected]');
+                expect(selectedOptions.length).toBe(2);
             });
-            it('opens the dropdown, and focuses first option on Home', async () => {
-                expect(await popover.getProperty('open')).toBe(false);
-                await input.press('Home');
-                expect(await popover.getProperty('open')).toBe(true);
-                const firstOption = options[0];
-                expect(firstOption).toHaveAttribute('active');
-                expect(await getFocusedOptionValue(page)).toEqual(firstOption.getAttribute('value'));
+        });
+    });
+    describe('Accessibility', () => {
+        describe('aXe DevTools', () => {
+            it('does not have accessibility violations', async () => {
+                const page = await setup({
+                    html: `
+                        <q2-select label="Test" value="option-1">
+                            <q2-option value="option-1" display="Option Text">Option Text</q2-option>
+                            <q2-option value="option-2" display="Option Text">Option Text</q2-option>
+                        </q2-select>
+                    `,
+                });
+                const hasViolations = await evaluateA11y(page);
+                expect(hasViolations).toBe(false);
             });
-            it('opens the dropdown and focuses last option on End', async () => {
-                expect(await popover.getProperty('open')).toBe(false);
-                await input.press('End');
-                expect(await popover.getProperty('open')).toBe(true);
-                const lastOption = options[options.length - 1];
-                expect(lastOption).toHaveAttribute('active');
-                expect(await getFocusedOptionValue(page)).toEqual(lastOption.getAttribute('value'));
+        });
+        describe('Accessibility Tree', () => {
+            it("option-list should have a role of 'listbox' and the options a role of 'option'", async () => {
+                page = await setup({
+                    html: `
+                        <q2-select label="My select">
+                            <q2-option value="option-1" display="Option 1">Option 1</q2-option>
+                            <q2-option value="option-2" display="Option 2">Option 2</q2-option>
+                            <q2-option value="option-3" display="Option 3">Option 3</q2-option>
+                        </q2-select>
+                    `,
+                });
+                input = await page.find('q2-select >>> q2-input');
+                await input.click();
+                await page.waitForChanges();
+                popover = await page.find('q2-select >>> q2-popover');
+                expect(await popover.getProperty('open')).toEqual(true);
+                const snapshot = await page.accessibility.snapshot();
+                const optionList = snapshot.children[2];
+                expect(optionList.role).toEqual('listbox');
+                expect(optionList.children).toHaveLength(3);
+                optionList.children.forEach(child => {
+                    expect(child.role).toEqual('option');
+                    expect(child.name).toBeTruthy();
+                });
             });
-            it('pseudo-searches for option if printable character is pressed', async () => {
+        });
+        describe('Keyboard Controls', () => {
+            let options;
+            const isInputFocused = async (page) => {
+                return page.$eval('body', () => document.activeElement.shadowRoot.activeElement.tagName === 'Q2-INPUT');
+            };
+            const isBodyFocused = async (page) => {
+                return page.$eval('body', () => document.activeElement.tagName === 'BODY');
+            };
+            beforeEach(async () => {
+                jest.setTimeout(5000);
                 page = await setup({
                     html: `
                         <q2-select>
-                            <q2-option display="Nebraska" value="NE">Nebraska</q2-option>
-                            <q2-option display="Nevada" value="NV">Nevada</q2-option>
-                            <q2-option display="New Hampshire" value="NH">New Hampshire</q2-option>
-                            <q2-option display="New Jersey" value="NJ">New Jersey</q2-option>
-                            <q2-option display="New Mexico" value="NM">New Mexico</q2-option>
-                            <q2-option display="New York" value="NY">New York</q2-option>
-                            <q2-option display="North Carolina" value="NC">North Carolina</q2-option>
-                            <q2-option display="North Dakota" value="ND">North Dakota</q2-option>
-                            <q2-option display="Ohio" value="OH">Ohio</q2-option>
-                            <q2-option display="Oklahoma" value="OK">Oklahoma</q2-option>
-                            <q2-option display="Oregon" value="OR">Oregon</q2-option>
-                            <q2-option display="Pennsylvania" value="PA">Pennsylvania</q2-option>
-                            <q2-option display="Rhode Island" value="RI">Rhode Island</q2-option>
+                            <q2-option value="1" display="Option 1">Option 1</q2-option>
+                            <q2-option value="2" display="Option 2">Option 2</q2-option>
+                            <q2-option value="3" display="Option 3">Option 3</q2-option>
+                            <q2-option value="4" display="Option 4">Option 4</q2-option>
+                            <q2-option value="5" display="Option 5">Option 5</q2-option>
+                            <q2-option value="6" display="Option 6">Option 6</q2-option>
+                            <q2-option value="7" display="Option 7">Option 7</q2-option>
+                            <q2-option value="8" display="Option 8">Option 8</q2-option>
+                            <q2-option value="9" display="Option 9">Option 9</q2-option>
+                            <q2-option value="10" display="Option 10">Option 10</q2-option>
+                            <q2-option value="11" display="Option 11">Option 11</q2-option>
+                            <q2-option value="12" display="Option 12">Option 12</q2-option>
+                            <q2-option value="13" display="Option 13">Option 13</q2-option>
+                            <q2-option value="14" display="Option 14">Option 14</q2-option>
+                            <q2-option value="15" display="Option 15">Option 15</q2-option>
                         </q2-select>
                     `,
                 });
+                await page.waitForChanges();
+                select = await page.find('q2-select');
                 input = await page.find('q2-select >>> q2-input');
-                await input.type('o');
-                const q2Select = await page.find('q2-select');
-                const selectInput = await page.find('q2-select >>> q2-input');
-                expect(await selectInput.getProperty('value')).toEqual('Ohio');
-                expect(await q2Select.getProperty('value')).toEqual('OH');
-                await input.type('k');
-                expect(await selectInput.getProperty('value')).toEqual('Oklahoma');
-                expect(await q2Select.getProperty('value')).toEqual('OK');
-                // Wait for debounce
-                await waitForTimeout(2000);
-                await input.type('New J');
-                expect(await selectInput.getProperty('value')).toEqual('New Jersey');
-                expect(await q2Select.getProperty('value')).toEqual('NJ');
-            });
-            describe('when value is present', () => {
+                popover = await page.find('q2-select >>> q2-popover');
+                options = await page.findAll('q2-option');
+            });
+            describe('when input has focus', () => {
                 beforeEach(async () => {
-                    await select.setProperty('value', '3');
-                    await page.waitForChanges();
+                    await input.focus();
                 });
-                it('opens the dropdown, and moves focus to first selected option on ArrowDown', async () => {
+                it('opens the dropdown, and moves focus to default option on ArrowDown', async () => {
                     expect(await popover.getProperty('open')).toBe(false);
                     await input.press('ArrowDown');
                     expect(await popover.getProperty('open')).toBe(true);
-                    const selectedOption = options[2];
-                    expect(selectedOption).toHaveAttribute('active');
-                    expect(await getFocusedOptionValue(page)).toEqual(selectedOption.getAttribute('value'));
+                    const firstOption = options[0];
+                    expect(firstOption).toHaveAttribute('active');
+                    expect(await getFocusedOptionValue(page)).toEqual(firstOption.getAttribute('value'));
                 });
-                it('opens the dropdown, and moves focus to first selected option on ArrowUp', async () => {
+                it('opens the dropdown, and moves focus to last option on ArrowUp', async () => {
                     expect(await popover.getProperty('open')).toBe(false);
                     await input.press('ArrowUp');
+                    await page.waitForChanges();
                     expect(await popover.getProperty('open')).toBe(true);
-                    const selectedOption = options[2];
-                    expect(selectedOption).toHaveAttribute('active');
-                    expect(await getFocusedOptionValue(page)).toEqual(selectedOption.getAttribute('value'));
+                    const lastOption = options[options.length - 1];
+                    expect(lastOption).toHaveAttribute('active');
+                    expect(await getFocusedOptionValue(page)).toEqual(lastOption.getAttribute('value'));
                 });
-            });
-        });
-        it('pseudo-searches for next matching option if same character is pressed 3 times', async () => {
-            page = await setup({
-                html: `
-                    <q2-select>
-                        <q2-option display="Nebraska" value="NE">Nebraska</q2-option>
-                        <q2-option display="Ohio" value="OH">Ohio</q2-option>
-                        <q2-option display="Nevada" value="NV">Nevada</q2-option>
-                        <q2-option display="Oklahoma" value="OK">Oklahoma</q2-option>
-                        <q2-option display="New Hampshire" value="NH">New Hampshire</q2-option>
-                    </q2-select>
-                `,
-            });
-            input = await page.find('q2-select >>> q2-input');
-            await input.press('n');
-            await page.waitForChanges();
-            const q2Select = await page.find('q2-select');
-            const selectInput = await page.find('q2-select >>> q2-input');
-            expect(await selectInput.getProperty('value')).toEqual('Nebraska');
-            expect(await q2Select.getProperty('value')).toEqual('NE');
-            await input.press('n');
-            await page.waitForChanges();
-            expect(await selectInput.getProperty('value')).toEqual('Nevada');
-            expect(await q2Select.getProperty('value')).toEqual('NV');
-            await input.press('n');
-            await page.waitForChanges();
-            expect(await selectInput.getProperty('value')).toEqual('New Hampshire');
-            expect(await q2Select.getProperty('value')).toEqual('NH');
-        });
-        describe('focus', () => {
-            let page;
-            let select;
-            beforeEach(async () => {
-                page = await setup({ html: `<q2-select></q2-select>` });
-                select = await page.find('q2-select');
-                expect(await innerActiveTestId(page)).toBeUndefined();
-            });
-            const innerActiveTestId = async (page) => {
-                return page.$eval('q2-select', el => { var _a; return (_a = el.shadowRoot.activeElement) === null || _a === void 0 ? void 0 : _a.getAttribute('test-id'); });
-            };
-            it('focuses inner button when focus event is dispatched', async () => {
-                await select.triggerEvent('focus');
-                await page.waitForChanges();
-                expect(await innerActiveTestId(page)).toEqual('toggleDropdown');
-            });
-            it('focuses inner button when element.focus() is called', async () => {
-                await select.focus();
-                await page.waitForChanges();
-                expect(await innerActiveTestId(page)).toEqual('toggleDropdown');
-            });
-        });
-        describe('when dropdown has focus', () => {
-            beforeEach(async () => {
-                await dispatchEvent(page, ['q2-select', 'q2-input'], 'keydown', {
-                    key: 'ArrowDown',
+                it('opens the dropdown on Space', async () => {
+                    expect(await popover.getProperty('open')).toBe(false);
+                    await input.press('Space');
+                    await page.waitForChanges();
+                    expect(await popover.getProperty('open')).toBe(true);
+                });
+                it('opens the dropdown, and focuses first option on Home', async () => {
+                    expect(await popover.getProperty('open')).toBe(false);
+                    await input.press('Home');
+                    expect(await popover.getProperty('open')).toBe(true);
+                    const firstOption = options[0];
+                    expect(firstOption).toHaveAttribute('active');
+                    expect(await getFocusedOptionValue(page)).toEqual(firstOption.getAttribute('value'));
+                });
+                it('opens the dropdown and focuses last option on End', async () => {
+                    expect(await popover.getProperty('open')).toBe(false);
+                    await input.press('End');
+                    expect(await popover.getProperty('open')).toBe(true);
+                    const lastOption = options[options.length - 1];
+                    expect(lastOption).toHaveAttribute('active');
+                    expect(await getFocusedOptionValue(page)).toEqual(lastOption.getAttribute('value'));
+                });
+                it('pseudo-searches for option if printable character is pressed', async () => {
+                    page = await setup({
+                        html: `
+                            <q2-select>
+                                <q2-option display="Nebraska" value="NE">Nebraska</q2-option>
+                                <q2-option display="Nevada" value="NV">Nevada</q2-option>
+                                <q2-option display="New Hampshire" value="NH">New Hampshire</q2-option>
+                                <q2-option display="New Jersey" value="NJ">New Jersey</q2-option>
+                                <q2-option display="New Mexico" value="NM">New Mexico</q2-option>
+                                <q2-option display="New York" value="NY">New York</q2-option>
+                                <q2-option display="North Carolina" value="NC">North Carolina</q2-option>
+                                <q2-option display="North Dakota" value="ND">North Dakota</q2-option>
+                                <q2-option display="Ohio" value="OH">Ohio</q2-option>
+                                <q2-option display="Oklahoma" value="OK">Oklahoma</q2-option>
+                                <q2-option display="Oregon" value="OR">Oregon</q2-option>
+                                <q2-option display="Pennsylvania" value="PA">Pennsylvania</q2-option>
+                                <q2-option display="Rhode Island" value="RI">Rhode Island</q2-option>
+                            </q2-select>
+                        `,
+                    });
+                    input = await page.find('q2-select >>> q2-input');
+                    await input.type('o');
+                    const q2Select = await page.find('q2-select');
+                    const selectInput = await page.find('q2-select >>> q2-input');
+                    expect(await selectInput.getProperty('value')).toEqual('Ohio');
+                    expect(await q2Select.getProperty('value')).toEqual('OH');
+                    await input.type('k');
+                    expect(await selectInput.getProperty('value')).toEqual('Oklahoma');
+                    expect(await q2Select.getProperty('value')).toEqual('OK');
+                    // Wait for debounce
+                    await waitForTimeout(2000);
+                    await input.type('New J');
+                    expect(await selectInput.getProperty('value')).toEqual('New Jersey');
+                    expect(await q2Select.getProperty('value')).toEqual('NJ');
+                });
+                describe('when value is present', () => {
+                    beforeEach(async () => {
+                        await select.setProperty('value', '3');
+                        await page.waitForChanges();
+                    });
+                    it('opens the dropdown, and moves focus to first selected option on ArrowDown', async () => {
+                        expect(await popover.getProperty('open')).toBe(false);
+                        await input.press('ArrowDown');
+                        expect(await popover.getProperty('open')).toBe(true);
+                        const selectedOption = options[2];
+                        expect(selectedOption).toHaveAttribute('active');
+                        expect(await getFocusedOptionValue(page)).toEqual(selectedOption.getAttribute('value'));
+                    });
+                    it('opens the dropdown, and moves focus to first selected option on ArrowUp', async () => {
+                        expect(await popover.getProperty('open')).toBe(false);
+                        await input.press('ArrowUp');
+                        expect(await popover.getProperty('open')).toBe(true);
+                        const selectedOption = options[2];
+                        expect(selectedOption).toHaveAttribute('active');
+                        expect(await getFocusedOptionValue(page)).toEqual(selectedOption.getAttribute('value'));
+                    });
                 });
-                expect(await popover.getProperty('open')).toBe(true);
-                expect(options[0]).toHaveAttribute('active');
-            });
-            it('sets the value, closes the dropdown, and focuses input on Enter', async () => {
-                await popover.press('Enter');
-                expect(await select.getProperty('value')).toEqual('1');
-                expect(await popover.getProperty('open')).toBe(false);
-                expect(await isInputFocused(page)).toBe(true);
-            });
-            it('sets the value, closes the dropdown, and focuses input on Space', async () => {
-                await popover.press(' ');
-                expect(await select.getProperty('value')).toEqual('1');
-                expect(await popover.getProperty('open')).toBe(false);
-                expect(await isInputFocused(page)).toBe(true);
-            });
-            it('sets the value, closes the dropdown, and move to next element on Tab', async () => {
-                await popover.press('Tab');
-                expect(await select.getProperty('value')).toEqual('1');
-                expect(await popover.getProperty('open')).toBe(false);
-                expect(await isBodyFocused(page)).toBe(true);
-            });
-            it('closes dropdown, and focuses input on Escape', async () => {
-                await popover.press('Escape');
-                expect(await select.getProperty('value')).toBeUndefined();
-                expect(await popover.getProperty('open')).toBe(false);
-                expect(await isInputFocused(page)).toBe(true);
-            });
-            it('focuses next option on ArrowDown', async () => {
-                await popover.press('ArrowDown');
-                expect(await popover.getProperty('open')).toBe(true);
-                expect(await getFocusedOptionValue(page)).toBe(options[1].getAttribute('value'));
-            });
-            it('focuses previous option on ArrowUp', async () => {
-                await popover.press('ArrowDown');
-                expect(options[1]).toHaveAttribute('active');
-                await popover.press('ArrowUp');
-                expect(await popover.getProperty('open')).toBe(true);
-                expect(options[0]).toHaveAttribute('active');
-                expect(await getFocusedOptionValue(page)).toBe(options[0].getAttribute('value'));
-            });
-            it('focuses first option on Home', async () => {
-                await popover.press('ArrowDown');
-                expect(options[1]).toHaveAttribute('active');
-                await popover.press('Home');
-                expect(await popover.getProperty('open')).toBe(true);
-                expect(options[0]).toHaveAttribute('active');
-                expect(await getFocusedOptionValue(page)).toBe(options[0].getAttribute('value'));
-            });
-            it('focuses last option on End', async () => {
-                await popover.press('ArrowDown');
-                expect(options[1]).toHaveAttribute('active');
-                await popover.press('End');
-                expect(await popover.getProperty('open')).toBe(true);
-                expect(options[14]).toHaveAttribute('active');
-                expect(await getFocusedOptionValue(page)).toBe(options[14].getAttribute('value'));
-            });
-            it('jumps focus forward 10 options on PageDown', async () => {
-                await popover.press('PageDown');
-                expect(options[10]).toHaveAttribute('active');
-                await popover.press('PageDown');
-                expect(options[14]).toHaveAttribute('active');
-            });
-            it('jumps focus back 10 options on PageUp', async () => {
-                await popover.press('End');
-                expect(options[14]).toHaveAttribute('active');
-                await popover.press('PageUp');
-                expect(options[4]).toHaveAttribute('active');
-                await popover.press('PageUp');
-                expect(options[0]).toHaveAttribute('active');
             });
-        });
-        describe('when input has value', () => {
-            beforeEach(async () => {
-                await select.setAttribute('value', '2');
+            it('pseudo-searches for next matching option if same character is pressed 3 times', async () => {
+                page = await setup({
+                    html: `
+                        <q2-select>
+                            <q2-option display="Nebraska" value="NE">Nebraska</q2-option>
+                            <q2-option display="Ohio" value="OH">Ohio</q2-option>
+                            <q2-option display="Nevada" value="NV">Nevada</q2-option>
+                            <q2-option display="Oklahoma" value="OK">Oklahoma</q2-option>
+                            <q2-option display="New Hampshire" value="NH">New Hampshire</q2-option>
+                        </q2-select>
+                    `,
+                });
+                input = await page.find('q2-select >>> q2-input');
+                await input.press('n');
                 await page.waitForChanges();
-                expect(options[1]).toHaveAttribute('selected');
-                expect(await popover.getProperty('open')).toBe(false);
-                changeSpy = await select.spyOnEvent('change');
-                inputSpy = await select.spyOnEvent('input');
-                expect(await input.getProperty('value')).toEqual('Option 2');
+                const q2Select = await page.find('q2-select');
+                const selectInput = await page.find('q2-select >>> q2-input');
+                expect(await selectInput.getProperty('value')).toEqual('Nebraska');
+                expect(await q2Select.getProperty('value')).toEqual('NE');
+                await input.press('n');
+                await page.waitForChanges();
+                expect(await selectInput.getProperty('value')).toEqual('Nevada');
+                expect(await q2Select.getProperty('value')).toEqual('NV');
+                await input.press('n');
+                await page.waitForChanges();
+                expect(await selectInput.getProperty('value')).toEqual('New Hampshire');
+                expect(await q2Select.getProperty('value')).toEqual('NH');
+            });
+            describe('focus', () => {
+                let page;
+                let select;
+                beforeEach(async () => {
+                    page = await setup({ html: `<q2-select></q2-select>` });
+                    select = await page.find('q2-select');
+                    expect(await innerActiveTestId(page)).toBeUndefined();
+                });
+                const innerActiveTestId = async (page) => {
+                    return page.$eval('q2-select', el => { var _a; return (_a = el.shadowRoot.activeElement) === null || _a === void 0 ? void 0 : _a.getAttribute('test-id'); });
+                };
+                it('focuses inner button when focus event is dispatched', async () => {
+                    await select.triggerEvent('focus');
+                    await page.waitForChanges();
+                    expect(await innerActiveTestId(page)).toEqual('toggleDropdown');
+                });
+                it('focuses inner button when element.focus() is called', async () => {
+                    await select.focus();
+                    await page.waitForChanges();
+                    expect(await innerActiveTestId(page)).toEqual('toggleDropdown');
+                });
             });
             describe('when dropdown has focus', () => {
                 beforeEach(async () => {
@@ -2116,64 +2205,79 @@ describe('q2-select', () => {
                         key: 'ArrowDown',
                     });
                     expect(await popover.getProperty('open')).toBe(true);
-                    expect(options[1]).toHaveAttribute('active');
+                    expect(options[0]).toHaveAttribute('active');
+                });
+                it('sets the value, closes the dropdown, and focuses input on Enter', async () => {
+                    await popover.press('Enter');
+                    expect(await select.getProperty('value')).toEqual('1');
+                    expect(await popover.getProperty('open')).toBe(false);
+                    expect(await isInputFocused(page)).toBe(true);
                 });
-                it('closes dropdown, maintains values, and focuses input on Escape', async () => {
+                it('sets the value, closes the dropdown, and focuses input on Space', async () => {
+                    await popover.press(' ');
+                    expect(await select.getProperty('value')).toEqual('1');
+                    expect(await popover.getProperty('open')).toBe(false);
+                    expect(await isInputFocused(page)).toBe(true);
+                });
+                it('sets the value, closes the dropdown, and move to next element on Tab', async () => {
+                    await popover.press('Tab');
+                    expect(await select.getProperty('value')).toEqual('1');
+                    expect(await popover.getProperty('open')).toBe(false);
+                    expect(await isBodyFocused(page)).toBe(true);
+                });
+                it('closes dropdown, and focuses input on Escape', async () => {
                     await popover.press('Escape');
-                    expect(await select.getProperty('value')).toEqual('2');
+                    expect(await select.getProperty('value')).toBeUndefined();
                     expect(await popover.getProperty('open')).toBe(false);
                     expect(await isInputFocused(page)).toBe(true);
                 });
-            });
-        });
-        describe('when searchable', () => {
-            beforeEach(async () => {
-                select.setAttribute('searchable', true);
-                await page.waitForChanges();
-            });
-            describe('when search query is typed', () => {
-                it('ArrowDown: focuses first option in search results', async () => {
-                    await input.press('3');
-                    await input.press('ArrowDown');
-                    expect(options[2]).toHaveAttribute('active');
-                    expect(await getFocusedValue(page)).toBe(options[2].getAttribute('value'));
+                it('focuses next option on ArrowDown', async () => {
+                    await popover.press('ArrowDown');
+                    expect(await popover.getProperty('open')).toBe(true);
+                    expect(await getFocusedOptionValue(page)).toBe(options[1].getAttribute('value'));
                 });
-                it('ArrowUp: focuses last option in search results', async () => {
-                    await input.press('3');
-                    await input.press('ArrowUp');
-                    expect(options[12]).toHaveAttribute('active');
-                    expect(await getFocusedValue(page)).toBe(options[12].getAttribute('value'));
+                it('focuses previous option on ArrowUp', async () => {
+                    await popover.press('ArrowDown');
+                    expect(options[1]).toHaveAttribute('active');
+                    await popover.press('ArrowUp');
+                    expect(await popover.getProperty('open')).toBe(true);
+                    expect(options[0]).toHaveAttribute('active');
+                    expect(await getFocusedOptionValue(page)).toBe(options[0].getAttribute('value'));
                 });
-            });
-            describe('when options are populated with `q2-card` elements', () => {
-                beforeEach(async () => {
-                    page = await setup({
-                        html: `
-                            <q2-select searchable>
-                                <q2-option value="1">
-                                    <q2-card title="Foo"></q2-card>
-                                </q2-option>
-                                <q2-option value="2">
-                                    <q2-card title="Bar"></q2-card>
-                                </q2-option>
-                                <q2-option value="3">
-                                    <q2-card title="Baz"></q2-card>
-                                </q2-option>
-                            </q2-select>
-                        `,
-                    });
-                    input = await page.find('q2-select >>> q2-input');
+                it('focuses first option on Home', async () => {
+                    await popover.press('ArrowDown');
+                    expect(options[1]).toHaveAttribute('active');
+                    await popover.press('Home');
+                    expect(await popover.getProperty('open')).toBe(true);
+                    expect(options[0]).toHaveAttribute('active');
+                    expect(await getFocusedOptionValue(page)).toBe(options[0].getAttribute('value'));
                 });
-                it('can search based of the `q2-card` title attribute', async () => {
-                    await input.focus();
-                    await input.type('Bar');
-                    options = await page.findAll('q2-option:not([hidden])');
-                    expect(options).toHaveLength(1);
+                it('focuses last option on End', async () => {
+                    await popover.press('ArrowDown');
+                    expect(options[1]).toHaveAttribute('active');
+                    await popover.press('End');
+                    expect(await popover.getProperty('open')).toBe(true);
+                    expect(options[14]).toHaveAttribute('active');
+                    expect(await getFocusedOptionValue(page)).toBe(options[14].getAttribute('value'));
+                });
+                it('jumps focus forward 10 options on PageDown', async () => {
+                    await popover.press('PageDown');
+                    expect(options[10]).toHaveAttribute('active');
+                    await popover.press('PageDown');
+                    expect(options[14]).toHaveAttribute('active');
+                });
+                it('jumps focus back 10 options on PageUp', async () => {
+                    await popover.press('End');
+                    expect(options[14]).toHaveAttribute('active');
+                    await popover.press('PageUp');
+                    expect(options[4]).toHaveAttribute('active');
+                    await popover.press('PageUp');
+                    expect(options[0]).toHaveAttribute('active');
                 });
             });
             describe('when input has value', () => {
                 beforeEach(async () => {
-                    select.setAttribute('value', '2');
+                    await select.setAttribute('value', '2');
                     await page.waitForChanges();
                     expect(options[1]).toHaveAttribute('selected');
                     expect(await popover.getProperty('open')).toBe(false);
@@ -2181,418 +2285,333 @@ describe('q2-select', () => {
                     inputSpy = await select.spyOnEvent('input');
                     expect(await input.getProperty('value')).toEqual('Option 2');
                 });
-                it('clears the input on focus', async () => {
-                    await input.focus();
-                    await page.waitForChanges();
-                    expect(await input.getProperty('value')).toEqual('');
-                    await input.press('5');
-                    expect(await input.getProperty('value')).toEqual('5');
-                    expect(await popover.getProperty('open')).toBe(true);
-                    expect(await page.findAll('q2-option:not([hidden])')).toHaveLength(2);
-                });
-                it('clears the input on focus without emitting events', async () => {
-                    await input.focus();
-                    expect(await input.getProperty('value')).toEqual('');
-                    expect(changeSpy).not.toHaveReceivedEvent();
-                    expect(inputSpy).not.toHaveReceivedEvent();
-                });
-                describe('when input has focus', () => {
-                    it('clears the value on keypress and emits change and input events', async () => {
-                        await input.focus();
-                        expect(await input.getProperty('value')).toEqual('');
-                        await input.press('X');
-                        expect(changeSpy).toHaveReceivedEventDetail({ value: '' });
-                        expect(inputSpy).toHaveReceivedEventDetail({ query: 'X' });
-                        expect(await popover.getProperty('open')).toBe(true);
-                        expect(await select.getProperty('value')).toEqual('');
-                        expect(await input.getProperty('value')).toEqual('X');
-                        const firstOption = options[1];
-                        expect(firstOption).not.toHaveAttribute('selected');
-                    });
-                    it('opens the dropdown, and focuses next option on ArrowDown', async () => {
-                        await input.press('ArrowDown');
-                        expect(await popover.getProperty('open')).toBe(true);
-                        const firstOption = options[1];
-                        expect(firstOption).toHaveAttribute('active');
-                        expect(await getFocusedOptionValue(page)).toEqual(firstOption.getAttribute('value'));
-                    });
-                    it('opens the dropdown, and focuses first option on ArrowUp', async () => {
-                        await input.press('ArrowUp');
+                describe('when dropdown has focus', () => {
+                    beforeEach(async () => {
+                        await dispatchEvent(page, ['q2-select', 'q2-input'], 'keydown', {
+                            key: 'ArrowDown',
+                        });
                         expect(await popover.getProperty('open')).toBe(true);
-                        const firstOption = options[1];
-                        expect(firstOption).toHaveAttribute('active');
-                        expect(await getFocusedOptionValue(page)).toEqual(firstOption.getAttribute('value'));
+                        expect(options[1]).toHaveAttribute('active');
                     });
-                    it('closes dropdown if open on Escape', async () => {
-                        await input.press('ArrowDown');
-                        expect(await popover.getProperty('open')).toBe(true);
-                        await input.press('Escape');
+                    it('closes dropdown, maintains values, and focuses input on Escape', async () => {
+                        await popover.press('Escape');
+                        expect(await select.getProperty('value')).toEqual('2');
                         expect(await popover.getProperty('open')).toBe(false);
+                        expect(await isInputFocused(page)).toBe(true);
                     });
                 });
             });
-            describe('when input is empty', () => {
-                it('opens the dropdown on Space', async () => {
-                    await dispatchEvent(page, ['q2-select', 'q2-input'], 'keydown', {
-                        key: ' ',
-                    });
-                    expect(await popover.getProperty('open')).toBe(true);
+            describe('when searchable', () => {
+                beforeEach(async () => {
+                    select.setAttribute('searchable', true);
+                    await page.waitForChanges();
                 });
-                it('opens the dropdown on Enter', async () => {
-                    await dispatchEvent(page, ['q2-select', 'q2-input'], 'keydown', {
-                        key: 'Enter',
+                describe('when search query is typed', () => {
+                    it('ArrowDown: focuses first option in search results', async () => {
+                        await input.press('3');
+                        await input.press('ArrowDown');
+                        expect(options[2]).toHaveAttribute('active');
+                        expect(await getFocusedValue(page)).toBe(options[2].getAttribute('value'));
                     });
-                    expect(await popover.getProperty('open')).toBe(true);
-                });
-                it('opens the dropdown, and focuses first option on ArrowDown', async () => {
-                    await dispatchEvent(page, ['q2-select', 'q2-input'], 'keydown', {
-                        key: 'ArrowDown',
+                    it('ArrowUp: focuses last option in search results', async () => {
+                        await input.press('3');
+                        await input.press('ArrowUp');
+                        expect(options[12]).toHaveAttribute('active');
+                        expect(await getFocusedValue(page)).toBe(options[12].getAttribute('value'));
                     });
-                    expect(await popover.getProperty('open')).toBe(true);
-                    const firstOption = options[0];
-                    expect(firstOption).toHaveAttribute('active');
-                    expect(await getFocusedOptionValue(page)).toEqual(firstOption.getAttribute('value'));
                 });
-                it('opens the dropdown, and focuses last option on ArrowUp', async () => {
-                    await dispatchEvent(page, ['q2-select', 'q2-input'], 'keydown', {
-                        key: 'ArrowUp',
+                describe('when options are populated with `q2-card` elements', () => {
+                    beforeEach(async () => {
+                        page = await setup({
+                            html: `
+                                <q2-select searchable>
+                                    <q2-option value="1">
+                                        <q2-card title="Foo"></q2-card>
+                                    </q2-option>
+                                    <q2-option value="2">
+                                        <q2-card title="Bar"></q2-card>
+                                    </q2-option>
+                                    <q2-option value="3">
+                                        <q2-card title="Baz"></q2-card>
+                                    </q2-option>
+                                </q2-select>
+                            `,
+                        });
+                        input = await page.find('q2-select >>> q2-input');
+                    });
+                    it('can search based of the `q2-card` title attribute', async () => {
+                        await input.focus();
+                        await input.type('Bar');
+                        options = await page.findAll('q2-option:not([hidden])');
+                        expect(options).toHaveLength(1);
                     });
-                    expect(await popover.getProperty('open')).toBe(true);
-                    const lastOption = options[options.length - 1];
-                    expect(lastOption).toHaveAttribute('active');
-                    expect(await getFocusedOptionValue(page)).toEqual(lastOption.getAttribute('value'));
                 });
-                it("clears typed value if dropdown isn't open on Escape", async () => {
-                    await input.focus();
-                    await input.type('Option');
-                    await page.waitForChanges();
-                    expect(await input.getProperty('value')).toEqual('Option');
-                    await input.press('Escape');
-                    expect(await input.getProperty('value')).toEqual('');
+                describe('when input has value', () => {
+                    beforeEach(async () => {
+                        select.setAttribute('value', '2');
+                        await page.waitForChanges();
+                        expect(options[1]).toHaveAttribute('selected');
+                        expect(await popover.getProperty('open')).toBe(false);
+                        changeSpy = await select.spyOnEvent('change');
+                        inputSpy = await select.spyOnEvent('input');
+                        expect(await input.getProperty('value')).toEqual('Option 2');
+                    });
+                    it('clears the input on focus', async () => {
+                        await input.focus();
+                        await page.waitForChanges();
+                        expect(await input.getProperty('value')).toEqual('');
+                        await input.press('5');
+                        expect(await input.getProperty('value')).toEqual('5');
+                        expect(await popover.getProperty('open')).toBe(true);
+                        expect(await page.findAll('q2-option:not([hidden])')).toHaveLength(2);
+                    });
+                    it('clears the input on focus without emitting events', async () => {
+                        await input.focus();
+                        expect(await input.getProperty('value')).toEqual('');
+                        expect(changeSpy).not.toHaveReceivedEvent();
+                        expect(inputSpy).not.toHaveReceivedEvent();
+                    });
+                    describe('when input has focus', () => {
+                        it('clears the value on keypress and emits change and input events', async () => {
+                            await input.focus();
+                            expect(await input.getProperty('value')).toEqual('');
+                            await input.press('X');
+                            expect(changeSpy).toHaveReceivedEventDetail({ value: '' });
+                            expect(inputSpy).toHaveReceivedEventDetail({ query: 'X' });
+                            expect(await popover.getProperty('open')).toBe(true);
+                            expect(await select.getProperty('value')).toEqual('');
+                            expect(await input.getProperty('value')).toEqual('X');
+                            const firstOption = options[1];
+                            expect(firstOption).not.toHaveAttribute('selected');
+                        });
+                        it('opens the dropdown, and focuses next option on ArrowDown', async () => {
+                            await input.press('ArrowDown');
+                            expect(await popover.getProperty('open')).toBe(true);
+                            const firstOption = options[1];
+                            expect(firstOption).toHaveAttribute('active');
+                            expect(await getFocusedOptionValue(page)).toEqual(firstOption.getAttribute('value'));
+                        });
+                        it('opens the dropdown, and focuses first option on ArrowUp', async () => {
+                            await input.press('ArrowUp');
+                            expect(await popover.getProperty('open')).toBe(true);
+                            const firstOption = options[1];
+                            expect(firstOption).toHaveAttribute('active');
+                            expect(await getFocusedOptionValue(page)).toEqual(firstOption.getAttribute('value'));
+                        });
+                        it('closes dropdown if open on Escape', async () => {
+                            await input.press('ArrowDown');
+                            expect(await popover.getProperty('open')).toBe(true);
+                            await input.press('Escape');
+                            expect(await popover.getProperty('open')).toBe(false);
+                        });
+                    });
                 });
-                describe('when printable character is pressed', () => {
-                    it('searches for option', async () => {
-                        const eventData = {
-                            key: 'n',
-                            detail: {
-                                value: 'option 2',
-                            },
-                        };
-                        await dispatchEvent(page, ['q2-select', 'q2-input'], 'keydown', eventData);
-                        await dispatchEvent(page, ['q2-select', 'q2-input'], 'input', eventData);
-                        await dispatchEvent(page, ['q2-select', 'q2-input'], 'keyup', eventData);
+                describe('when input is empty', () => {
+                    it('opens the dropdown on Space', async () => {
+                        await dispatchEvent(page, ['q2-select', 'q2-input'], 'keydown', {
+                            key: ' ',
+                        });
                         expect(await popover.getProperty('open')).toBe(true);
-                        expect(options[0]).toHaveAttribute('hidden');
-                        expect(options[1]).not.toHaveAttribute('hidden');
-                        expect(options[2]).toHaveAttribute('hidden');
-                    });
-                    it('enters dropdown on Arrow Down', async () => {
-                        const eventData = {
-                            key: 'n',
-                            detail: {
-                                value: 'option 2',
-                            },
-                        };
-                        await dispatchEvent(page, ['q2-select', 'q2-input'], 'keydown', eventData);
-                        await dispatchEvent(page, ['q2-select', 'q2-input'], 'input', eventData);
-                        await dispatchEvent(page, ['q2-select', 'q2-input'], 'keyup', eventData);
+                    });
+                    it('opens the dropdown on Enter', async () => {
+                        await dispatchEvent(page, ['q2-select', 'q2-input'], 'keydown', {
+                            key: 'Enter',
+                        });
                         expect(await popover.getProperty('open')).toBe(true);
+                    });
+                    it('opens the dropdown, and focuses first option on ArrowDown', async () => {
                         await dispatchEvent(page, ['q2-select', 'q2-input'], 'keydown', {
                             key: 'ArrowDown',
                         });
-                        const visibleOption = options[1];
-                        expect(await getFocusedOptionValue(page)).toEqual(visibleOption.getAttribute('value'));
+                        expect(await popover.getProperty('open')).toBe(true);
+                        const firstOption = options[0];
+                        expect(firstOption).toHaveAttribute('active');
+                        expect(await getFocusedOptionValue(page)).toEqual(firstOption.getAttribute('value'));
                     });
-                });
-                describe('when multiple', () => {
-                    beforeEach(async () => {
-                        select.setProperty('multiple', true);
+                    it('opens the dropdown, and focuses last option on ArrowUp', async () => {
+                        await dispatchEvent(page, ['q2-select', 'q2-input'], 'keydown', {
+                            key: 'ArrowUp',
+                        });
+                        expect(await popover.getProperty('open')).toBe(true);
+                        const lastOption = options[options.length - 1];
+                        expect(lastOption).toHaveAttribute('active');
+                        expect(await getFocusedOptionValue(page)).toEqual(lastOption.getAttribute('value'));
+                    });
+                    it("clears typed value if dropdown isn't open on Escape", async () => {
+                        await input.focus();
+                        await input.type('Option');
                         await page.waitForChanges();
+                        expect(await input.getProperty('value')).toEqual('Option');
+                        await input.press('Escape');
+                        expect(await input.getProperty('value')).toEqual('');
                     });
-                    it('does not show an indicator of total selected options', async () => {
-                        expect(await popover.getProperty('open')).toBe(false);
-                        await input.press('ArrowDown');
-                        expect(await popover.getProperty('open')).toBe(true);
-                        input = await page.find('q2-select >>> q2-input');
-                        expect(input).not.toHaveAttribute('badge-value');
+                    describe('when printable character is pressed', () => {
+                        it('searches for option', async () => {
+                            const eventData = {
+                                key: 'n',
+                                detail: {
+                                    value: 'option 2',
+                                },
+                            };
+                            await dispatchEvent(page, ['q2-select', 'q2-input'], 'keydown', eventData);
+                            await dispatchEvent(page, ['q2-select', 'q2-input'], 'input', eventData);
+                            await dispatchEvent(page, ['q2-select', 'q2-input'], 'keyup', eventData);
+                            expect(await popover.getProperty('open')).toBe(true);
+                            expect(options[0]).toHaveAttribute('hidden');
+                            expect(options[1]).not.toHaveAttribute('hidden');
+                            expect(options[2]).toHaveAttribute('hidden');
+                        });
+                        it('enters dropdown on Arrow Down', async () => {
+                            const eventData = {
+                                key: 'n',
+                                detail: {
+                                    value: 'option 2',
+                                },
+                            };
+                            await dispatchEvent(page, ['q2-select', 'q2-input'], 'keydown', eventData);
+                            await dispatchEvent(page, ['q2-select', 'q2-input'], 'input', eventData);
+                            await dispatchEvent(page, ['q2-select', 'q2-input'], 'keyup', eventData);
+                            expect(await popover.getProperty('open')).toBe(true);
+                            await dispatchEvent(page, ['q2-select', 'q2-input'], 'keydown', {
+                                key: 'ArrowDown',
+                            });
+                            const visibleOption = options[1];
+                            expect(await getFocusedOptionValue(page)).toEqual(visibleOption.getAttribute('value'));
+                        });
+                    });
+                    describe('when multiple', () => {
+                        beforeEach(async () => {
+                            select.setProperty('multiple', true);
+                            await page.waitForChanges();
+                        });
+                        it('does not show an indicator of total selected options', async () => {
+                            expect(await popover.getProperty('open')).toBe(false);
+                            await input.press('ArrowDown');
+                            expect(await popover.getProperty('open')).toBe(true);
+                            input = await page.find('q2-select >>> q2-input');
+                            expect(input).not.toHaveAttribute('badge-value');
+                        });
                     });
                 });
             });
-        });
-        describe('when multiple', () => {
-            beforeEach(async () => {
-                await select.setProperty('multiple', true);
-            });
-            describe('when visibility controls are focused', () => {
-                let allOptionsRadio;
+            describe('when multiple', () => {
                 beforeEach(async () => {
-                    await dispatchEvent(page, ['q2-select', 'q2-input'], 'keydown', {
-                        key: 'ArrowDown',
-                    });
-                    expect(await popover.getProperty('open')).toBe(true);
-                    await popover.press('Space');
-                    expect(options[0]).toHaveAttribute('selected');
-                    allOptionsRadio = await page.find('q2-select >>> [test-id=allOptionsButton]');
-                    selectedOptionsRadio = await page.find('q2-select >>> [test-id=selectedOptionsButton]');
-                    selectedOptionsRadioLabel = await page.find('q2-select >>> [test-id=selectedOptionsButton] + label');
-                    allOptionsRadioLabel = await page.find('q2-select >>> [test-id=allOptionsButton] + label');
-                    await allOptionsRadio.focus();
-                    expect(options[0]).toHaveAttribute('active');
-                    expect(await popover.getProperty('open')).toBe(true);
+                    await select.setProperty('multiple', true);
                 });
-                describe('when all options button is focused', () => {
+                describe('when visibility controls are focused', () => {
+                    let allOptionsRadio;
                     beforeEach(async () => {
-                        await allOptionsRadioLabel.click();
-                        await page.waitForChanges();
-                        expect(await allOptionsRadio.getProperty('checked')).toEqual(true);
+                        await dispatchEvent(page, ['q2-select', 'q2-input'], 'keydown', {
+                            key: 'ArrowDown',
+                        });
+                        expect(await popover.getProperty('open')).toBe(true);
+                        await popover.press('Space');
+                        expect(options[0]).toHaveAttribute('selected');
+                        allOptionsRadio = await page.find('q2-select >>> [test-id=allOptionsButton]');
+                        selectedOptionsRadio = await page.find('q2-select >>> [test-id=selectedOptionsButton]');
+                        selectedOptionsRadioLabel = await page.find('q2-select >>> [test-id=selectedOptionsButton] + label');
+                        allOptionsRadioLabel = await page.find('q2-select >>> [test-id=allOptionsButton] + label');
+                        await allOptionsRadio.focus();
+                        expect(options[0]).toHaveAttribute('active');
+                        expect(await popover.getProperty('open')).toBe(true);
                     });
-                    it('moves focus to first option on ArrowDown', async () => {
-                        await allOptionsRadio.press('ArrowDown');
-                        expect(await selectedOptionsRadio.getProperty('checked')).toEqual(true);
+                    describe('when all options button is focused', () => {
+                        beforeEach(async () => {
+                            await allOptionsRadioLabel.click();
+                            await page.waitForChanges();
+                            expect(await allOptionsRadio.getProperty('checked')).toEqual(true);
+                        });
+                        it('moves focus to first option on ArrowDown', async () => {
+                            await allOptionsRadio.press('ArrowDown');
+                            expect(await selectedOptionsRadio.getProperty('checked')).toEqual(true);
+                        });
+                        it('moves focus to first option on ArrowUp', async () => {
+                            await allOptionsRadio.press('ArrowUp');
+                            expect(await selectedOptionsRadio.getProperty('checked')).toEqual(true);
+                        });
+                    });
+                    describe('when selected options button is focused', () => {
+                        beforeEach(async () => {
+                            await selectedOptionsRadioLabel.click();
+                            await page.waitForChanges();
+                            expect(await selectedOptionsRadio.getProperty('checked')).toEqual(true);
+                        });
+                        it('moves focus to first option on ArrowDown', async () => {
+                            await selectedOptionsRadio.press('ArrowDown');
+                            expect(await allOptionsRadio.getProperty('checked')).toEqual(true);
+                        });
+                        it('moves focus to all options radio on ArrowUp', async () => {
+                            await selectedOptionsRadio.press('ArrowUp');
+                            expect(await allOptionsRadio.getProperty('checked')).toEqual(true);
+                        });
                     });
-                    it('moves focus to first option on ArrowUp', async () => {
-                        await allOptionsRadio.press('ArrowUp');
+                    it('selects on Click', async () => {
+                        expect(await selectedOptionsRadio.getProperty('checked')).toEqual(false);
+                        await selectedOptionsRadioLabel.click();
                         expect(await selectedOptionsRadio.getProperty('checked')).toEqual(true);
+                        expect(options[0]).toHaveAttribute('active');
                     });
                 });
-                describe('when selected options button is focused', () => {
+                describe('when dropdown has focus', () => {
                     beforeEach(async () => {
-                        await selectedOptionsRadioLabel.click();
+                        await dispatchEvent(page, ['q2-select', 'q2-input'], 'keydown', {
+                            key: 'ArrowDown',
+                        });
                         await page.waitForChanges();
-                        expect(await selectedOptionsRadio.getProperty('checked')).toEqual(true);
+                        expect(await popover.getProperty('open')).toBe(true);
+                        expect(options[0]).toHaveAttribute('active');
                     });
-                    it('moves focus to first option on ArrowDown', async () => {
-                        await selectedOptionsRadio.press('ArrowDown');
-                        expect(await allOptionsRadio.getProperty('checked')).toEqual(true);
+                    const selectAndDeselectMultipleOptions = async (key) => {
+                        // Selecting second option
+                        await popover.press('ArrowDown');
+                        await page.waitForChanges();
+                        expect(options[1]).not.toHaveAttribute('selected');
+                        await popover.press(key);
+                        expect(options[1]).toHaveAttribute('selected');
+                        expect(await popover.getProperty('open')).toBe(true);
+                        expect(await input.getProperty('value')).toEqual('Option 2');
+                        expect(await select.getProperty('selectedOptions')).toEqual(['2']);
+                        expect(input).not.toHaveAttribute('badge-value');
+                        // Selecting fourth option
+                        await popover.press('ArrowDown');
+                        await popover.press('ArrowDown');
+                        expect(options[3]).toHaveAttribute('active');
+                        expect(options[3]).not.toHaveAttribute('selected');
+                        await popover.press(key);
+                        expect(options[3]).toHaveAttribute('selected');
+                        expect(options[3]).toHaveAttribute('active');
+                        expect(await popover.getProperty('open')).toBe(true);
+                        expect(await input.getProperty('value')).toEqual('Option 2');
+                        expect(await select.getProperty('selectedOptions')).toEqual(['2', '4']);
+                        expect(input).toEqualAttribute('badge-value', '+1');
+                        // Deselecting fourth option
+                        await popover.press(key);
+                        expect(options[3]).not.toHaveAttribute('selected');
+                        expect(options[3]).toHaveAttribute('active');
+                        expect(await popover.getProperty('open')).toBe(true);
+                        expect(await input.getProperty('value')).toEqual('Option 2');
+                        expect(await select.getProperty('selectedOptions')).toEqual(['2']);
+                        expect(input).not.toHaveAttribute('badge-value');
+                        // Selecting fifth option
+                        await popover.press('ArrowDown');
+                        expect(options[4]).toHaveAttribute('active');
+                        expect(options[4]).not.toHaveAttribute('selected');
+                        await popover.press(key);
+                        expect(options[4]).toHaveAttribute('selected');
+                        expect(await input.getProperty('value')).toEqual('Option 2');
+                        expect(await select.getProperty('selectedOptions')).toEqual(['2', '5']);
+                        expect(input).toEqualAttribute('badge-value', '+1');
+                    };
+                    it('can select and deselect multiple options via Space without closing dropdown', async () => {
+                        await selectAndDeselectMultipleOptions('Space');
                     });
-                    it('moves focus to all options radio on ArrowUp', async () => {
-                        await selectedOptionsRadio.press('ArrowUp');
-                        expect(await allOptionsRadio.getProperty('checked')).toEqual(true);
+                    it('selects and deselects option on Enter, without closing dropdown', async () => {
+                        await selectAndDeselectMultipleOptions('Enter');
                     });
                 });
-                it('selects on Click', async () => {
-                    expect(await selectedOptionsRadio.getProperty('checked')).toEqual(false);
-                    await selectedOptionsRadioLabel.click();
-                    expect(await selectedOptionsRadio.getProperty('checked')).toEqual(true);
-                    expect(options[0]).toHaveAttribute('active');
-                });
-            });
-            describe('when dropdown has focus', () => {
-                beforeEach(async () => {
-                    await dispatchEvent(page, ['q2-select', 'q2-input'], 'keydown', {
-                        key: 'ArrowDown',
-                    });
-                    await page.waitForChanges();
-                    expect(await popover.getProperty('open')).toBe(true);
-                    expect(options[0]).toHaveAttribute('active');
-                });
-                const selectAndDeselectMultipleOptions = async (key) => {
-                    // Selecting second option
-                    await popover.press('ArrowDown');
-                    await page.waitForChanges();
-                    expect(options[1]).not.toHaveAttribute('selected');
-                    await popover.press(key);
-                    expect(options[1]).toHaveAttribute('selected');
-                    expect(await popover.getProperty('open')).toBe(true);
-                    expect(await input.getProperty('value')).toEqual('Option 2');
-                    expect(await select.getProperty('selectedOptions')).toEqual(['2']);
-                    expect(input).not.toHaveAttribute('badge-value');
-                    // Selecting fourth option
-                    await popover.press('ArrowDown');
-                    await popover.press('ArrowDown');
-                    expect(options[3]).toHaveAttribute('active');
-                    expect(options[3]).not.toHaveAttribute('selected');
-                    await popover.press(key);
-                    expect(options[3]).toHaveAttribute('selected');
-                    expect(options[3]).toHaveAttribute('active');
-                    expect(await popover.getProperty('open')).toBe(true);
-                    expect(await input.getProperty('value')).toEqual('Option 2');
-                    expect(await select.getProperty('selectedOptions')).toEqual(['2', '4']);
-                    expect(input).toEqualAttribute('badge-value', '+1');
-                    // Deselecting fourth option
-                    await popover.press(key);
-                    expect(options[3]).not.toHaveAttribute('selected');
-                    expect(options[3]).toHaveAttribute('active');
-                    expect(await popover.getProperty('open')).toBe(true);
-                    expect(await input.getProperty('value')).toEqual('Option 2');
-                    expect(await select.getProperty('selectedOptions')).toEqual(['2']);
-                    expect(input).not.toHaveAttribute('badge-value');
-                    // Selecting fifth option
-                    await popover.press('ArrowDown');
-                    expect(options[4]).toHaveAttribute('active');
-                    expect(options[4]).not.toHaveAttribute('selected');
-                    await popover.press(key);
-                    expect(options[4]).toHaveAttribute('selected');
-                    expect(await input.getProperty('value')).toEqual('Option 2');
-                    expect(await select.getProperty('selectedOptions')).toEqual(['2', '5']);
-                    expect(input).toEqualAttribute('badge-value', '+1');
-                };
-                it('can select and deselect multiple options via Space without closing dropdown', async () => {
-                    await selectAndDeselectMultipleOptions('Space');
-                });
-                it('selects and deselects option on Enter, without closing dropdown', async () => {
-                    await selectAndDeselectMultipleOptions('Enter');
-                });
-            });
-        });
-    });
-    describe('Updating option list', () => {
-        describe('when multiple is false', () => {
-            it('does not modify the value when the selected option is removed', async () => {
-                page = await setup({
-                    html: `
-                        <q2-select label="States" value="AK">
-                            <q2-option value="AL" display="Alabama">Alabama</q2-option>
-                            <q2-option value="AZ" display="Arizona">Arizona</q2-option>
-                            <q2-option value="AR" display="Arkansas">Arkansas</q2-option>
-                            <q2-option value="AK" display="Alaska" selected>Alaska</q2-option>
-                        </q2-select>
-                    `,
-                });
-                select = await page.find('q2-select');
-                input = await page.find('q2-select >>> q2-input');
-                const alaskaSelector = 'q2-option[value="AK"]';
-                let option = await page.find(alaskaSelector);
-                expect(option).toHaveAttribute('selected');
-                expect(await select.getProperty('value')).toEqual('AK');
-                expect(await input.getProperty('value')).toEqual('Alaska');
-                await page.$eval(alaskaSelector, element => element.remove());
-                await page.waitForChanges();
-                option = await page.find(alaskaSelector);
-                expect(option).toBeNull();
-                expect(await select.getProperty('value')).toEqual('AK');
-                expect(await input.getProperty('value')).toEqual('Alaska');
-            });
-            it('marks a newly added option as selected if it matches the value', async () => {
-                page = await setup({
-                    html: `
-                        <q2-select label="States" value="CA">
-                            <q2-option value="AL" display="Alabama">Alabama</q2-option>
-                            <q2-option value="AZ" display="Arizona">Arizona</q2-option>
-                            <q2-option value="AR" display="Arkansas">Arkansas</q2-option>
-                            <q2-option value="AK" display="Alaska" selected>Alaska</q2-option>
-                        </q2-select>
-                    `,
-                });
-                await page.waitForChanges();
-                select = await page.find('q2-select');
-                input = await page.find('q2-select >>> q2-input');
-                await page.waitForChanges();
-                expect(await select.getProperty('value')).toEqual('CA');
-                expect(await input.getProperty('value')).toEqual('CA');
-                await page.evaluate(() => {
-                    const option = document.createElement('q2-option');
-                    option.value = 'CA';
-                    option.display = 'California';
-                    option.textContent = 'California';
-                    return document.querySelector('q2-select').appendChild(option);
-                });
-                await page.waitForChanges();
-                const californiaSelector = 'q2-option[value="CA"]';
-                const option = await page.find(californiaSelector);
-                expect(option).toHaveAttribute('selected');
-                expect(await select.getProperty('value')).toEqual('CA');
-                expect(await input.getProperty('value')).toEqual('CA');
-            });
-        });
-        describe('when multiple is true', () => {
-            it('does not modify selectedOptions when a selected option is removed', async () => {
-                page = await setup({
-                    html: `
-                        <q2-select label="States" multiple>
-                            <q2-option value="AL" display="Alabama">Alabama</q2-option>
-                            <q2-option value="AZ" display="Arizona">Arizona</q2-option>
-                            <q2-option value="AR" display="Arkansas">Arkansas</q2-option>
-                            <q2-option value="AK" display="Alaska">Alaska</q2-option>
-                        </q2-select>
-                    `,
-                });
-                select = await page.find('q2-select');
-                input = await page.find('q2-select >>> q2-input');
-                options = await page.findAll('q2-option');
-                await select.setProperty('selectedOptions', ['AL', 'AZ']);
-                await page.waitForChanges();
-                let selectedOptions = await page.findAll('q2-option[selected]');
-                expect(selectedOptions.length).toBe(2);
-                expect(options.length).toBe(4);
-                expect(await input.getProperty('value')).toEqual('Alabama');
-                const alabamaSelector = 'q2-option[value="AL"]';
-                await page.$eval(alabamaSelector, element => element.remove());
-                await page.waitForChanges();
-                const alabamaOption = await page.find(alabamaSelector);
-                expect(alabamaOption).toBeNull();
-                expect(await select.getProperty('selectedOptions')).toEqual(['AL', 'AZ']);
-                expect(await input.getProperty('value')).toEqual('Alabama');
-                options = await page.findAll('q2-option');
-                expect(options.length).toBe(3);
-                selectedOptions = await page.findAll('q2-option[selected]');
-                expect(selectedOptions.length).toBe(1);
-            });
-            it('marks a newly added option as selected if it matches a selectedOptions value', async () => {
-                page = await setup({
-                    html: `
-                        <q2-select label="States" multiple>
-                            <q2-option value="AL" display="Alabama">Alabama</q2-option>
-                            <q2-option value="AZ" display="Arizona">Arizona</q2-option>
-                            <q2-option value="AR" display="Arkansas">Arkansas</q2-option>
-                            <q2-option value="AK" display="Alaska" selected>Alaska</q2-option>
-                        </q2-select>
-                    `,
-                });
-                select = await page.find('q2-select');
-                input = await page.find('q2-select >>> q2-input');
-                options = await page.findAll('q2-option');
-                await select.setProperty('selectedOptions', ['AL', 'CA']);
-                await page.waitForChanges();
-                let selectedOptions = await page.findAll('q2-option[selected]');
-                expect(selectedOptions.length).toBe(1);
-                expect(options.length).toBe(4);
-                expect(await input.getProperty('value')).toEqual('Alabama');
-                await page.evaluate(() => {
-                    const option = document.createElement('q2-option');
-                    option.value = 'CA';
-                    option.display = 'California';
-                    option.textContent = 'California';
-                    return document.querySelector('q2-select').appendChild(option);
-                });
-                await page.waitForChanges();
-                const californiaSelector = 'q2-option[value="CA"]';
-                const option = await page.find(californiaSelector);
-                expect(option).toHaveAttribute('selected');
-                expect(await select.getProperty('selectedOptions')).toEqual(['AL', 'CA']);
-                expect(await input.getProperty('value')).toEqual('Alabama');
-                options = await page.findAll('q2-option');
-                expect(options.length).toBe(5);
-                selectedOptions = await page.findAll('q2-option[selected]');
-                expect(selectedOptions.length).toBe(2);
-            });
-        });
-    });
-    describe('Accessibility', () => {
-        it("option-list should have a role of 'listbox' and the options a role of 'option'", async () => {
-            page = await setup({
-                html: `
-                    <q2-select label="My select">
-                        <q2-option value="option-1" display="Option 1">Option 1</q2-option>
-                        <q2-option value="option-2" display="Option 2">Option 2</q2-option>
-                        <q2-option value="option-3" display="Option 3">Option 3</q2-option>
-                    </q2-select>
-                `,
-            });
-            input = await page.find('q2-select >>> q2-input');
-            await input.click();
-            await page.waitForChanges();
-            popover = await page.find('q2-select >>> q2-popover');
-            expect(await popover.getProperty('open')).toEqual(true);
-            const snapshot = await page.accessibility.snapshot();
-            const optionList = snapshot.children[2];
-            expect(optionList.role).toEqual('listbox');
-            expect(optionList.children).toHaveLength(3);
-            optionList.children.forEach(child => {
-                expect(child.role).toEqual('option');
-                expect(child.name).toBeTruthy();
             });
         });
+        describe('Other', () => { });
     });
 });
 //# sourceMappingURL=q2-select-test.e2e.js.map