Skip to content

Commit

Permalink
feat(dropdown): add 'selectedItemText', acquire 'value' from menu-item
Browse files Browse the repository at this point in the history
  • Loading branch information
@Westbrook
Cecilia Vu authored and Westbrook committed Oct 16, 2019
1 parent 2c187b5 commit ee991af
Show file tree
Hide file tree
Showing 4 changed files with 128 additions and 39 deletions.
10 changes: 6 additions & 4 deletions .gitignore
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,12 +20,12 @@ documentation/api-docs/*.html
documentation/dist
test/**/*.js
test/**/*.js.map
test/**/*.d.ts
test/**/*.d.ts
packages/*/src/**/*.css.js
packages/*/test/**/*.js
packages/*/test/**/*.js.map
packages/*/test/**/*.d.ts
packages/*/stories/**/*.d.ts
packages/*/test/**/*.d.ts
packages/*/stories/**/*.d.ts
!test/global.d.ts
!packages/*/test/global.d.ts
*.tsbuildinfo
Expand All @@ -36,4 +36,6 @@ TESTS.xml

/test/benchmark/**/*.js
/test/benchmark/**/*.js.map
/test/benchmark/**/*.d.ts
/test/benchmark/**/*.d.ts

package-lock.json
4 changes: 2 additions & 2 deletions __snapshots__/Dropdown.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ Select a Country with a very long label, too long in fact
<sp-menu-item role="option" tabindex="0">
Deselect
</sp-menu-item>
<sp-menu-item role="option" tabindex="-1">
<sp-menu-item role="option" tabindex="-1" value="option-2">
Select Inverse
</sp-menu-item>
<sp-menu-item role="option" tabindex="-1">
Expand Down Expand Up @@ -61,7 +61,7 @@ Select a Country with a very long label, too long in fact
<sp-menu-item role="option" tabindex="0">
Deselect
</sp-menu-item>
<sp-menu-item role="option" tabindex="-1">
<sp-menu-item role="option" tabindex="-1" value="option-2">
Select Inverse
</sp-menu-item>
<sp-menu-item role="option" tabindex="-1">
Expand Down
31 changes: 28 additions & 3 deletions packages/dropdown/src/dropdown.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -73,6 +73,9 @@ export class Dropdown extends Focusable {
@property({ type: String })
public value = '';

@property({ type: String })
public selectedItemText = '';

protected listRole = 'listbox';
protected itemRole = 'option';

Expand Down Expand Up @@ -108,6 +111,9 @@ export class Dropdown extends Focusable {

public onOptionsChange(): void {
this.optionsMenu = this.querySelector('sp-menu');
if (this.value) {
this.requestUpdate('value');
}
}

public onButtonBlur(): void {
Expand Down Expand Up @@ -158,16 +164,18 @@ export class Dropdown extends Focusable {
}
this.open = true;
}

public setValueFromItem(item: MenuItem): void {
const oldSelectedItemText = this.selectedItemText;
const oldValue = this.value;
this.value = (item.textContent || /* istanbul ignore next */ '').trim();
this.selectedItemText = item.itemText;
this.value = item.value;
const applyDefault = this.dispatchEvent(
new Event('change', {
cancelable: true,
})
);
if (!applyDefault) {
this.selectedItemText = oldSelectedItemText;
this.value = oldValue;
return;
}
Expand All @@ -192,7 +200,7 @@ export class Dropdown extends Focusable {
class=${ifDefined(this.value ? undefined : 'placeholder')}
>
${this.value
? this.value
? this.selectedItemText
: html`
<slot></slot>
`}
Expand Down Expand Up @@ -240,6 +248,23 @@ export class Dropdown extends Focusable {

protected updated(changedProperties: PropertyValues): void {
super.updated(changedProperties);
if (changedProperties.has('value') && this.optionsMenu) {
const items = [
...this.querySelectorAll(
`[role=${this.optionsMenu.childRole}]`
),
] as MenuItem[];
const selectedItem = items.find(
(item) => this.value === item.value
) as MenuItem;
if (selectedItem) {
selectedItem.selected = true;
this.selectedItemText = selectedItem.itemText;
} else {
this.value = '';
this.selectedItemText = '';
}
}
if (changedProperties.has('disabled') && this.disabled) {
this.open = false;
}
Expand Down
122 changes: 92 additions & 30 deletions packages/dropdown/test/dropdown.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@ const dropdownFixture = async (): Promise<Dropdown> =>
<sp-menu-item>
Deselect
</sp-menu-item>
<sp-menu-item>
<sp-menu-item value="option-2">
Select Inverse
</sp-menu-item>
<sp-menu-item>
Expand Down Expand Up @@ -107,16 +107,14 @@ describe('Dropdown', () => {
button.click();
await elementUpdated(el);

const openContent = button.textContent ? button.textContent : '';
expect(el.open).to.be.true;
expect(openContent.trim()).to.equal('');
expect(el.selectedItemText).to.equal('');
expect(el.value).to.equal('');

secondItem.click();
await elementUpdated(el);

const closedContent = button.textContent ? button.textContent : '';
expect(el.open).to.be.false;
expect(closedContent.trim()).to.equal('Select Inverse');
expect(el.selectedItemText).to.equal('Select Inverse');
expect(el.value).to.equal('option-2');
});
it('re-selects', async () => {
const el = await dropdownFixture();
Expand All @@ -134,29 +132,27 @@ describe('Dropdown', () => {
button.click();
await elementUpdated(el);

const openContent = button.textContent ? button.textContent : '';
expect(el.open).to.be.true;
expect(openContent.trim()).to.equal('');
expect(el.selectedItemText).to.equal('');
expect(el.value).to.equal('');

secondItem.click();
await elementUpdated(el);

let closedContent = button.textContent ? button.textContent : '';
expect(el.open).to.be.false;
expect(closedContent.trim()).to.equal('Select Inverse');
expect(el.selectedItemText).to.equal('Select Inverse');
expect(el.value).to.equal('option-2');

button.click();
await elementUpdated(el);

expect(el.open).to.be.true;
expect(openContent.trim()).to.equal('');
expect(el.selectedItemText).to.equal('Select Inverse');
expect(el.value).to.equal('option-2');

firstItem.click();
await elementUpdated(el);

closedContent = button.textContent ? button.textContent : '';
expect(el.open).to.be.false;
expect(closedContent.trim()).to.equal('Deselect');
expect(el.selectedItemText).to.equal('Deselect');
expect(el.value).to.equal('Deselect');
});
it('can have selection prevented', async () => {
const el = await dropdownFixture();
Expand All @@ -171,17 +167,13 @@ describe('Dropdown', () => {
button.click();
await elementUpdated(el);

const openContent = button.textContent ? button.textContent : '';
expect(el.open).to.be.true;
expect(openContent.trim()).to.equal('');
expect(el.selectedItemText).to.equal('');
expect(el.value).to.equal('');
expect(secondItem.selected).to.be.false;

el.addEventListener(
'change',
(e: Event): void => {
e.preventDefault();
}
);
el.addEventListener('change', (e: Event): void => {
e.preventDefault();
});

secondItem.click();
await elementUpdated(el);
Expand Down Expand Up @@ -212,16 +204,16 @@ describe('Dropdown', () => {
button.dispatchEvent(arrowDownEvent);
await elementUpdated(el);

const openContent = button.textContent ? button.textContent : '';
expect(el.open).to.be.true;
expect(openContent.trim()).to.equal('');
expect(el.selectedItemText).to.equal('');
expect(el.value).to.equal('');

firstItem.click();
await elementUpdated(el);

const closedContent = button.textContent ? button.textContent : '';
expect(el.open).to.be.false;
expect(closedContent.trim()).to.equal('Deselect');
expect(el.selectedItemText).to.equal('Deselect');
expect(el.value).to.equal('Deselect');
});
it('loads', async () => {
const el = await dropdownFixture();
Expand Down Expand Up @@ -250,4 +242,74 @@ describe('Dropdown', () => {
expect(el.open).to.be.true;
expect(document.activeElement === firstItem).to.be.true;
});
it('displays selected item text by default', async () => {
const el = await fixture<Dropdown>(
html`
<sp-dropdown value="inverse">
Select a Country with a very long label, too long in fact
<sp-menu slot="options">
<sp-menu-item value="deselect">
Deselect Text
</sp-menu-item>
<sp-menu-item value="inverse">
Select Inverse
</sp-menu-item>
<sp-menu-item>
Feather...
</sp-menu-item>
<sp-menu-item>
Select and Mask...
</sp-menu-item>
<sp-menu-divider></sp-menu-divider>
<sp-menu-item>
Save Selection
</sp-menu-item>
<sp-menu-item disabled>
Make Work Path
</sp-menu-item>
</sp-menu>
</sp-dropdown>
`
);

await elementUpdated(el);

expect(el.value).to.equal('inverse');
expect(el.selectedItemText).to.equal('Select Inverse');
});
it('resets value when item not available', async () => {
const el = await fixture<Dropdown>(
html`
<sp-dropdown value="missing">
Select a Country with a very long label, too long in fact
<sp-menu slot="options">
<sp-menu-item value="deselect">
Deselect Text
</sp-menu-item>
<sp-menu-item value="inverse">
Select Inverse
</sp-menu-item>
<sp-menu-item>
Feather...
</sp-menu-item>
<sp-menu-item>
Select and Mask...
</sp-menu-item>
<sp-menu-divider></sp-menu-divider>
<sp-menu-item>
Save Selection
</sp-menu-item>
<sp-menu-item disabled>
Make Work Path
</sp-menu-item>
</sp-menu>
</sp-dropdown>
`
);

await elementUpdated(el);

expect(el.value).to.equal('');
expect(el.selectedItemText).to.equal('');
});
});

0 comments on commit ee991af

Please sign in to comment.