Skip to content

Commit f3d41e6

Browse files
benderabendera
committed
wip
1 parent a380664 commit f3d41e6

9 files changed

Lines changed: 45 additions & 61 deletions

File tree

‎dev/vscode-multi-select/autofocus-combobox.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
<head>
44
<meta charset="UTF-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6-
<title>VSCode Elements</title>
6+
<title>multi combo</title>
77
<link
88
rel="stylesheet"
99
href="/node_modules/@vscode/codicons/dist/codicon.css"

‎dev/vscode-multi-select/autofocus-select.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
<head>
44
<meta charset="UTF-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6-
<title>VSCode Elements</title>
6+
<title>multi select</title>
77
<link
88
rel="stylesheet"
99
href="/node_modules/@vscode/codicons/dist/codicon.css"

‎dev/vscode-single-select/autofocus-combobox.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
<head>
44
<meta charset="UTF-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6-
<title>VSCode Elements</title>
6+
<title>single combo</title>
77
<link
88
rel="stylesheet"
99
href="/node_modules/@vscode/codicons/dist/codicon.css"

‎dev/vscode-single-select/autofocus-select.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
<head>
44
<meta charset="UTF-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6-
<title>VSCode Elements</title>
6+
<title>single select</title>
77
<link
88
rel="stylesheet"
99
href="/node_modules/@vscode/codicons/dist/codicon.css"

‎dev/vscode-single-select/basic-example.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@
2828
<vscode-demo>
2929
<vscode-single-select label="Single Select example">
3030
<vscode-option>Lorem</vscode-option>
31-
<vscode-option>Ipsum</vscode-option>
31+
<vscode-option disabled="">Ipsum</vscode-option>
3232
<vscode-option>Dolor</vscode-option>
3333
</vscode-single-select>
3434
<button type="button">focus</button>

‎eslint.config.mjs‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,7 @@ export default [
3838
},
3939

4040
rules: {
41+
'no-console': 'error',
4142
'no-unexpected-multiline': 'off',
4243
'@typescript-eslint/indent': 'off',
4344
'@typescript-eslint/explicit-function-return-type': 'off',

‎src/includes/vscode-select/vscode-select-base.ts‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -364,6 +364,7 @@ export class VscodeSelectBase extends VscElement {
364364

365365
protected async _createAndSelectSuggestedOption() {}
366366

367+
//#region event handlers
367368
protected _onFaceClick(): void {
368369
this._toggleDropdown(!this.open);
369370
}
@@ -647,6 +648,7 @@ export class VscodeSelectBase extends VscElement {
647648
this._isBeingFiltered = false;
648649
return;
649650
}
651+
//#endregion
650652

651653
//#region render functions
652654
protected _renderOptions(): TemplateResult | TemplateResult[] {
@@ -791,12 +793,13 @@ export class VscodeSelectBase extends VscElement {
791793
${this._multiple ? this._renderMultiSelectLabel() : nothing}
792794
<input
793795
aria-activedescendant=${activeDescendant}
794-
aria-label=${ifDefined(this.label)}
795796
aria-autocomplete="list"
796797
aria-controls=${this._multiple
797798
? 'multi-select-listbox'
798799
: 'single-select-listbox'}
799800
aria-expanded=${this.open ? 'true' : 'false'}
801+
aria-haspopup="listbox"
802+
aria-label=${ifDefined(this.label)}
800803
class="combobox-input"
801804
role="combobox"
802805
spellcheck="false"

‎src/vscode-multi-select/vscode-multi-select.ts‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,7 @@ export class VscodeMultiSelect
5353
/** @internal */
5454
static override shadowRootOptions: ShadowRootInit = {
5555
...LitElement.shadowRootOptions,
56-
delegatesFocus: false,
56+
delegatesFocus: true,
5757
};
5858

5959
static formAssociated = true;
@@ -286,6 +286,7 @@ export class VscodeMultiSelect
286286
this._isPlaceholderOptionActive = false;
287287
}
288288

289+
//#region event handlers
289290
protected override _onSlotChange(): void {
290291
super._onSlotChange();
291292

@@ -388,6 +389,7 @@ export class VscodeMultiSelect
388389
this._setFormValue();
389390
this._manageRequired();
390391
}
392+
//#endregion
391393

392394
//#region render functions
393395
private _renderLabel() {

‎src/vscode-single-select/vscode-single-select.test.ts‎

Lines changed: 32 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -258,7 +258,6 @@ describe('vscode-single-select', () => {
258258

259259
//#region keyboard interactions
260260

261-
262261
it('the value should be changed when the arrow down key pressed while the dropdown is closed', async () => {
263262
const el = (await fixture(html`
264263
<vscode-single-select>
@@ -831,54 +830,13 @@ describe('vscode-single-select', () => {
831830
</vscode-single-select>
832831
`)) as VscodeSingleSelect;
833832

834-
// selects the first option
835-
await clickOnElement(el);
836-
let options = el.shadowRoot?.querySelector('.options');
837-
const firstOption = options?.querySelector('li')!;
838-
await clickOnElement(firstOption);
839-
840-
expect(el.value).to.eq('Lorem');
841-
842-
// re-opens the dropdown, selects the second option with keyboard
843-
await clickOnElement(el);
844-
await sendKeys({down: 'ArrowDown'});
845-
846-
expect(el.shadowRoot?.querySelector('.dropdown')).lightDom.to.eq(
847-
`
848-
<ul class="options">
849-
<li class="option">Lorem</li>
850-
<li class="active option">Ipsum</li>
851-
<li class="option">Dolor</li>
852-
</ul>
853-
`,
854-
{
855-
ignoreAttributes: [
856-
'aria-selected',
857-
'data-index',
858-
'data-filtered-index',
859-
'id',
860-
'role',
861-
],
862-
}
863-
);
833+
el.value = 'Ipsum';
834+
await el.updateComplete;
864835

865-
// clicks outside, closes the dropdown
866-
await sendMouse({type: 'click', position: [500, 500]});
867-
// opens the dropdown again
868836
await clickOnElement(el);
837+
const activeOption = el.shadowRoot?.querySelector('.option.active');
869838

870-
expect(el.shadowRoot?.querySelector('.dropdown')).lightDom.to.eq(
871-
`
872-
<ul class="options">
873-
<li class="active option">Lorem</li>
874-
<li class="option">Ipsum</li>
875-
<li class="option">Dolor</li>
876-
</ul>
877-
`,
878-
{
879-
ignoreAttributes: ['data-index', 'data-filtered-index'],
880-
}
881-
);
839+
expect(activeOption).lightDom.to.eq('Ipsum');
882840
});
883841

884842
//#region keyboard interactions
@@ -887,7 +845,25 @@ describe('vscode-single-select', () => {
887845
it(
888846
'when the ESC key is pressed, clears the textbox if the listbox is not displayed'
889847
);
890-
it('when the ArrowDown key is pressed selects the next option in a filtered list');
848+
849+
it('when the ArrowDown key is pressed selects the next option in a filtered list', async () => {
850+
const el = await fixture<VscodeSingleSelect>(
851+
html`<vscode-single-select combobox>
852+
<vscode-option>Lorem</vscode-option>
853+
<vscode-option>Ipsum</vscode-option>
854+
<vscode-option>Dolor</vscode-option>
855+
</vscode-single-select>`
856+
);
857+
858+
el.focus();
859+
await sendKeys({type: 'l'});
860+
await sendKeys({down: 'ArrowDown'});
861+
await sendKeys({down: 'ArrowDown'});
862+
863+
const activeOption = el.shadowRoot?.querySelector('.option.active');
864+
865+
expect(activeOption).lightDom.to.eq('Do<b>l</b>or');
866+
});
891867
//#endregion
892868
//#endregion
893869
});
@@ -1093,7 +1069,7 @@ describe('vscode-single-select', () => {
10931069
});
10941070

10951071
it('skips disabled options', async () => {
1096-
const el = await fixture(html`
1072+
const el = await fixture<VscodeSingleSelect>(html`
10971073
<vscode-single-select>
10981074
<vscode-option>Lorem</vscode-option>
10991075
<vscode-option disabled>Ipsum</vscode-option>
@@ -1102,13 +1078,13 @@ describe('vscode-single-select', () => {
11021078
</vscode-single-select>
11031079
`);
11041080

1105-
await clickOnElement(el);
1106-
await clickOnElement(el);
1107-
await sendKeys({down: 'ArrowDown'});
1081+
el.focus();
1082+
await sendKeys({press: 'ArrowDown'});
1083+
await sendKeys({press: 'ArrowDown'});
11081084

1109-
const text = el.shadowRoot?.querySelector('.text');
1085+
const activeOption = el.shadowRoot?.querySelector('.option.active');
11101086

1111-
expect(text).lightDom.to.eq('Sit');
1087+
expect(activeOption).lightDom.to.eq('Sit');
11121088
});
11131089

11141090
it('skips disabled options when dropdown is open', async () => {
@@ -1235,7 +1211,9 @@ describe('vscode-single-select', () => {
12351211
});
12361212

12371213
describe('closed dropdown', () => {
1238-
it('opens the dropdown if it is not already displayed when DownArrow is pressed');
1214+
it(
1215+
'opens the dropdown if it is not already displayed when DownArrow is pressed'
1216+
);
12391217
it('opens the dropdown when Alt + DownArrow are pressed');
12401218
it('Up Arrow is pressed');
12411219
it('Enter is pressed');

0 commit comments

Comments
 (0)