-
-
Notifications
You must be signed in to change notification settings - Fork 5
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: add
navigationHighlight to optionally disable built-in feature (
#235) * feat: add `navigationHighlight` to optionally disable built-in feature - for whatever reason, the user might want to disable the feature, hence this new option
- Loading branch information
1 parent
a87f7f8
commit 9da0baa
Showing
8 changed files
with
288 additions
and
53 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,137 @@ | ||
| <div class="row"> | ||
| <div class="col-md-12 title-desc"> | ||
| <h2 class="bd-title"> | ||
| Navigation Highlight | ||
| <span class="float-end links"> | ||
| Code <span class="fa fa-link"></span> | ||
| <span class="small"> | ||
| <a | ||
| target="_blank" | ||
| href="https://github.com/ghiscoding/multiple-select-vanilla/blob/main/packages/demo/src/options/options02.html" | ||
| >html</a | ||
| > | ||
| | | ||
| <a target="_blank" href="https://github.com/ghiscoding/multiple-select-vanilla/blob/main/packages/demo/src/options/options02.ts" | ||
| >ts</a | ||
| > | ||
| </span> | ||
| </span> | ||
| </h2> | ||
| <div class="demo-subtitle"> | ||
| The <code>navigationHighlight</code> is enabled by default and is very similar to <code>tabIndex</code>, | ||
| it listens to up/down arrows and mouse hovering. | ||
| You can then click on Enter key to select the highlighted option without even losing your current focus. | ||
| </div> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div> | ||
| <div class="mb-3 row"> | ||
| <label class="col-sm-2">Single Group Select</label> | ||
|
|
||
| <div class="col-sm-10"> | ||
| <select class="multiple-select full-width" data-test="select1"> | ||
| <optgroup label="Group 1"> | ||
| <option value="1">Option 1</option> | ||
| <option value="2">Option 2</option> | ||
| <option value="3">Option 3</option> | ||
| </optgroup> | ||
| <optgroup label="Group 2"> | ||
| <option value="4">Option 4</option> | ||
| <option value="5">Option 5</option> | ||
| <option value="6">Option 6</option> | ||
| </optgroup> | ||
| <optgroup label="Group 3"> | ||
| <option value="7">Option 7</option> | ||
| <option value="8">Option 8</option> | ||
| <option value="9">Option 9</option> | ||
| </optgroup> | ||
| </select> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div class="mb-3 row"> | ||
| <label class="col-sm-2">Multiple Select</label> | ||
|
|
||
| <div class="col-sm-10"> | ||
| <select multiple="multiple" class="multiple-select full-width" data-test="select2"> | ||
| <option value="1">January</option> | ||
| <option value="2">February</option> | ||
| <option value="3">March</option> | ||
| <option value="4">April</option> | ||
| <option value="5">May</option> | ||
| <option value="6">June</option> | ||
| <option value="7">July</option> | ||
| <option value="8">August</option> | ||
| <option value="9">September</option> | ||
| <option value="10">October</option> | ||
| <option value="11">November</option> | ||
| <option value="12">December</option> | ||
| </select> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div class="mb-3 row"> | ||
| <label class="col-sm-2"> Group Select </label> | ||
|
|
||
| <div class="col-sm-10"> | ||
| <select multiple="multiple" class="full-width" data-test="select3"> | ||
| <optgroup label="Group 1" disabled="disabled"> | ||
| <option value="1" selected>Option 1</option> | ||
| <option value="2">Option 2</option> | ||
| <option value="3">Option 3</option> | ||
| </optgroup> | ||
| <optgroup label="Group 2"> | ||
| <option value="4">Option 4</option> | ||
| <option value="5" selected>Option 5</option> | ||
| <option value="6">Option 6</option> | ||
| </optgroup> | ||
| <optgroup label="Group 3"> | ||
| <option value="7" disabled="disabled">Option 7</option> | ||
| <option value="8">Option 8</option> | ||
| <option value="9">Option 9</option> | ||
| </optgroup> | ||
| </select> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div class="mb-3 row"> | ||
| <label class="col-sm-2">Select with Filter</label> | ||
|
|
||
| <div class="col-sm-10"> | ||
| <select multiple="multiple" class="full-width" data-test="select4"> | ||
| <option value="1">abc</option> | ||
| <option value="2">bcd</option> | ||
| <option value="3">cde</option> | ||
| <option value="4">def</option> | ||
| <option value="5">efg</option> | ||
| <option value="6">fgh</option> | ||
| <option value="7">ghi</option> | ||
| <option value="8">hij</option> | ||
| <option value="9">ijk</option> | ||
| <option value="10">jkl</option> | ||
| <option value="11">klm</option> | ||
| <option value="12">lmn</option> | ||
| <option value="13">mno</option> | ||
| <option value="14">nop</option> | ||
| <option value="15">opq</option> | ||
| <option value="16">pqr</option> | ||
| <option value="17">qrs</option> | ||
| <option value="18">rst</option> | ||
| <option value="19">stu</option> | ||
| <option value="20">tuv</option> | ||
| <option value="21">uvw</option> | ||
| <option value="22">vwx</option> | ||
| <option value="23">wxy</option> | ||
| <option value="24">xyz</option> | ||
| <option value="25">123</option> | ||
| <option value="26">234</option> | ||
| <option value="27">345</option> | ||
| <option value="28">456</option> | ||
| <option value="29">567</option> | ||
| <option value="30">678</option> | ||
| <option value="31">789</option> | ||
| </select> | ||
| </div> | ||
| </div> | ||
| </div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,27 @@ | ||
| import { type MultipleSelectInstance, multipleSelect } from 'multiple-select-vanilla'; | ||
|
|
||
| export default class Example { | ||
| ms1?: MultipleSelectInstance; | ||
| ms2?: MultipleSelectInstance; | ||
| ms3?: MultipleSelectInstance; | ||
| ms4?: MultipleSelectInstance; | ||
|
|
||
| mount() { | ||
| this.ms1 = multipleSelect('select[data-test=select1]') as MultipleSelectInstance; | ||
| this.ms2 = multipleSelect('select[data-test=select2]') as MultipleSelectInstance; | ||
| this.ms3 = multipleSelect('select[data-test=select3]') as MultipleSelectInstance; | ||
| this.ms4 = multipleSelect('select[data-test=select4]', { filter: true }) as MultipleSelectInstance; | ||
| } | ||
|
|
||
| unmount() { | ||
| // destroy ms instance(s) to avoid DOM leaks | ||
| this.ms1?.destroy(); | ||
| this.ms2?.destroy(); | ||
| this.ms3?.destroy(); | ||
| this.ms4?.destroy(); | ||
| this.ms1 = undefined; | ||
| this.ms2 = undefined; | ||
| this.ms3 = undefined; | ||
| this.ms4 = undefined; | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,62 @@ | ||
| import { test, expect } from '@playwright/test'; | ||
|
|
||
| test.describe('Option 37 - Navigation Highlight', () => { | ||
| test('first select with single group select', async ({ page }) => { | ||
| await page.goto('#/options37'); | ||
|
|
||
| // 1st select | ||
| await page.locator('[data-test="select1"].ms-parent').click(); | ||
| const optGroups = await page.locator('.group.hide-radio .optgroup.disabled'); | ||
| const liElms = await page.locator('div[data-test=select1] .option-level-1'); | ||
| await expect(optGroups).toBeDefined(); | ||
| await expect(optGroups).toHaveCount(3); | ||
| await expect(liElms).toHaveCount(9); | ||
| await expect(optGroups.nth(0)).toContainText('Group 1'); | ||
| await expect(optGroups.nth(1)).toContainText('Group 2'); | ||
| await expect(optGroups.nth(2)).toContainText('Group 3'); | ||
| page.keyboard.press('ArrowDown'); | ||
| page.keyboard.press('ArrowDown'); | ||
| page.keyboard.press('Space'); | ||
| await expect(page.locator('[data-test=select1].ms-parent .ms-choice span')).toHaveText('Option 3'); | ||
| await expect(await page.locator('div[data-test=select1].ms-parent')).not.toHaveClass('ms-parent-open'); | ||
|
|
||
| // 2nd select | ||
| await page.locator('[data-test="select2"].ms-parent').click(); | ||
| page.keyboard.press('ArrowDown'); | ||
| page.keyboard.press('ArrowDown'); | ||
| page.keyboard.press('Space'); | ||
| page.keyboard.press('ArrowDown'); | ||
| page.keyboard.press('Enter'); | ||
| await expect(page.locator('[data-test=select2].ms-parent .ms-choice span')).toHaveText('February, March'); | ||
| await page.locator('[data-test="select2"].ms-parent').click(); | ||
| await expect(await page.locator('div[data-test=select2].ms-parent')).not.toHaveClass('ms-parent-open'); | ||
|
|
||
| // 3rd select | ||
| await page.locator('[data-test="select3"].ms-parent').click(); | ||
| page.keyboard.press('ArrowDown'); | ||
| page.keyboard.press('Space'); | ||
| await expect(page.locator('[data-test=select3].ms-parent .ms-choice span')).toHaveText('4 of 9 selected'); | ||
| page.keyboard.press('ArrowDown'); | ||
| page.keyboard.press('Enter'); | ||
| await expect(page.locator('[data-test=select3].ms-parent .ms-choice span')).toHaveText('[Group 1: Option 1], [Group 2: Option 5, Option 6]'); | ||
| page.keyboard.press('ArrowUp'); | ||
| page.keyboard.press('Space'); | ||
| await expect(page.locator('[data-test=select3].ms-parent .ms-choice span')).toHaveText('4 of 9 selected'); | ||
| await expect(await page.locator('div[data-test=select3].ms-parent')).not.toHaveClass('ms-parent-open'); | ||
| await page.locator('[data-test="select3"].ms-parent').click(); | ||
|
|
||
| // 4th select | ||
| await page.locator('[data-test="select4"].ms-parent').click(); | ||
| page.keyboard.press('ArrowDown'); | ||
| page.keyboard.press('Enter'); | ||
| await page.keyboard.type('de'); | ||
| await page.getByLabel('def').check(); | ||
| await page.getByLabel('cde').check(); | ||
| const selectAllLoc = await page.locator('[data-test=select4] .ms-select-all input[type=checkbox]'); | ||
| expect(selectAllLoc).toBeChecked(); | ||
| await expect(page.locator('[data-test=select4].ms-drop input[data-name="selectItem"]')).toHaveCount(2); | ||
| await expect(page.locator('[data-test=select4].ms-drop ul li.selected input[data-name="selectItem"]')).toHaveCount(2); | ||
| await expect(page.locator('[data-test=select4] .ms-choice span')).toHaveText('abc, cde, def'); | ||
| await expect(page.getByRole('button', { name: 'cde, def' })).toHaveCount(1); | ||
| }); | ||
| }); |