Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(button-group): changed igcSelect/igcDeselect to non-cancelable #984

Merged
merged 4 commits into from
Nov 20, 2023
+18 −64
Merged

fix(button-group): changed igcSelect/igcDeselect to non-cancelable #984

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
ff5b6a8
fix(button-group): changed igcSelect/igcDeselect to non-cancelable
RivaIvanova Nov 13, 2023
fcb2a6c
Merge branch 'master' into rivanova/fix-975
RivaIvanova Nov 14, 2023
a0b8331
Merge branch 'master' into rivanova/fix-975
RivaIvanova Nov 15, 2023
828fd03
Merge branch 'master' into rivanova/fix-975
RivaIvanova Nov 16, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
62 changes: 14 additions & 48 deletions src/components/button-group/button-group.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -577,32 +577,16 @@ describe('Button Group', () => {
buttons[0].dispatchEvent(new MouseEvent('click', { bubbles: true }));
await elementUpdated(buttonGroup);

const args = {
cancelable: true,
detail: buttons[0].value,
};
const args = { detail: buttons[0].value };

expect(eventSpy).calledWith('igcSelect', args);
expect(buttonGroup.selectedItems.length).to.equal(1);
expect(buttonGroup.selectedItems).to.have.same.members([
buttons[0].value,
]);
});

it('can cancel `igcSelect` event', async () => {
const eventSpy = spy(buttonGroup, 'emitEvent');

buttonGroup.addEventListener('igcSelect', (event) => {
event.preventDefault();
expect(buttonGroup.selectedItems.length).to.equal(1);
expect(buttonGroup.selectedItems).to.have.same.members([
event.detail,
]);
});

// select button
buttons[0].dispatchEvent(new MouseEvent('click', { bubbles: true }));
await elementUpdated(buttonGroup);

expect(eventSpy).calledWith('igcSelect');
expect(buttons[0].selected).to.be.false;
expect(buttonGroup.selectedItems.length).to.equal(0);
});

it('should emit `igcDeselect` event on deselect', async () => {
Expand All @@ -615,37 +599,19 @@ describe('Button Group', () => {
buttons[0].dispatchEvent(new MouseEvent('click', { bubbles: true }));
await elementUpdated(buttonGroup);

const args = {
cancelable: true,
detail: buttons[0].value,
};
const args = { detail: buttons[0].value };

expect(eventSpy).calledWith('igcDeselect', args);
expect(buttonGroup.selectedItems.length).to.equal(0);
});

it('can cancel `igcDeselect` event', async () => {
buttons[0].selected = true;
await elementUpdated(buttonGroup);

const eventSpy = spy(buttonGroup, 'emitEvent');

buttonGroup.addEventListener('igcDeselect', (event) => {
event.preventDefault();
buttonGroup.addEventListener('igcDeselect', () => {
expect(buttonGroup.selectedItems.length).to.equal(0);
});

// deselect button
buttons[0].dispatchEvent(new MouseEvent('click', { bubbles: true }));
await elementUpdated(buttonGroup);

expect(eventSpy).calledWith('igcDeselect');
expect(buttonGroup.selectedItems.length).to.equal(1);
});

it('events are correctly emitted on user interaction (single mode)', async () => {
const eventSpy = spy(buttonGroup, 'emitEvent');
const selectArgs = { cancelable: true, detail: '' };
const deselectArgs = { cancelable: true, detail: '' };
const selectArgs = { detail: '' };
const deselectArgs = { detail: '' };

// select first button
buttons[0].dispatchEvent(new MouseEvent('click', { bubbles: true }));
Expand Down Expand Up @@ -676,8 +642,8 @@ describe('Button Group', () => {

it('events are correctly emitted on user interaction (single-required mode)', async () => {
const eventSpy = spy(buttonGroup, 'emitEvent');
const selectArgs = { cancelable: true, detail: '' };
const deselectArgs = { cancelable: true, detail: '' };
const selectArgs = { detail: '' };
const deselectArgs = { detail: '' };

buttonGroup.selection = 'single-required';
await elementUpdated(buttonGroup);
Expand Down Expand Up @@ -725,8 +691,8 @@ describe('Button Group', () => {

it('events are correctly emitted on user interaction (multiple mode)', async () => {
const eventSpy = spy(buttonGroup, 'emitEvent');
const selectArgs = { cancelable: true, detail: '' };
const deselectArgs = { cancelable: true, detail: '' };
const selectArgs = { detail: '' };
const deselectArgs = { detail: '' };

buttonGroup.selection = 'multiple';
await elementUpdated(buttonGroup);
Expand Down
20 changes: 4 additions & 16 deletions src/components/button-group/button-group.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -168,25 +168,13 @@ export default class IgcButtonGroupComponent extends EventEmitterMixin<
}

private emitSelectEvent(button: IgcToggleButtonComponent) {
const select = this.emitEvent('igcSelect', {
cancelable: true,
detail: button.value,
});

if (select) {
button.selected = true;
}
button.selected = true;
this.emitEvent('igcSelect', { detail: button.value });
}

private emitDeselectEvent(button: IgcToggleButtonComponent) {
const deselect = this.emitEvent('igcDeselect', {
cancelable: true,
detail: button.value,
});

if (deselect) {
button.selected = false;
}
button.selected = false;
this.emitEvent('igcDeselect', { detail: button.value });
}

private setSelection(values: Set<string>) {
Expand Down
Loading