feat: Date filter/list: Radio button: consistency between space and c…

…lick [GAUD-6576] (#4799)
BrightspaceUI · Jul 8, 2024 · 87cd764 · 87cd764
1 parent 8ccd78d
commit 87cd764
Show file tree

Hide file tree

Showing 6 changed files with 8 additions and 7 deletions.
diff --git a/components/filter/filter.js b/components/filter/filter.js
@@ -1052,7 +1052,7 @@ class Filter extends FocusMixin(LocalizeCoreElement(RtlMixin(LitElement))) {
 			this._changeEventsToDispatch.set(dimension.key, { dimensionKey: dimension.key, cleared: false, changes: new Map() });
 		}
 		const dimensionChanges = this._changeEventsToDispatch.get(dimension.key);
-		dimensionChanges.cleared = dimensionCleared;
+		dimensionChanges.cleared = dimensionCleared || (dimension.selectionSingle && !change.selected && !dimension.appliedCount);
 
 		switch (dimension.type) {
 			case 'd2l-filter-dimension-set':

diff --git a/components/filter/test/filter.test.js b/components/filter/test/filter.test.js
@@ -372,7 +372,7 @@ describe('d2l-filter', () => {
 			expect(elem._changeEventsToDispatch.size).to.equal(1);
 			const changeEventDim = elem._changeEventsToDispatch.get('3');
 			expect(changeEventDim.dimensionKey).to.equal('3');
-			expect(changeEventDim.cleared).to.be.false;
+			expect(changeEventDim.cleared).to.be.true;
 			expect(changeEventDim.changes.size).to.equal(1);
 			const changeEvent = changeEventDim.changes.get('2');
 			expect(changeEvent.valueKey).to.equal('2');
@@ -543,7 +543,7 @@ describe('d2l-filter', () => {
 				dimensions = e.detail.dimensions;
 				expect(dimensions.length).to.equal(1);
 				expect(dimensions[0].dimensionKey).to.equal('dim');
-				expect(dimensions[0].cleared).to.be.false;
+				expect(dimensions[0].cleared).to.be.true;
 				changes = dimensions[0].changes;
 				expect(changes[0].valueKey).to.equal('2');
 				expect(changes[0].selected).to.be.false;
@@ -724,7 +724,7 @@ describe('d2l-filter', () => {
 				dimensions = e.detail.dimensions;
 				expect(dimensions.length).to.equal(1);
 				expect(dimensions[0].dimensionKey).to.equal('dim');
-				expect(dimensions[0].cleared).to.be.false;
+				expect(dimensions[0].cleared).to.be.true;
 				expect(dimensions[0].changes.length).to.equal(1);
 				expect(dimensions[0].changes[0].valueKey).to.equal('2');
 				expect(dimensions[0].changes[0].selected).to.be.false;

diff --git a/components/selection/selection-input.js b/components/selection/selection-input.js
@@ -155,15 +155,15 @@ class Input extends SkeletonMixin(LabelledMixin(LitElement)) {
 	_handleRadioClick(e) {
 		e.stopPropagation();
 		if (this.disabled) return;
-		this.selected = true;
+		this.selected = !this.selected;
 	}
 
 	_handleRadioKeyDown(e) {
 		if (e.keyCode === keyCodes.SPACE) e.preventDefault();
 	}
 
 	_handleRadioKeyUp(e) {
-		if (e.keyCode === keyCodes.SPACE) this.selected = true;
+		if (e.keyCode === keyCodes.SPACE) this.selected = !this.selected;
 	}
 
 }

diff --git a/...ts/selection/test/golden/selection-components/chromium/radio-selected-click.png b/...ts/selection/test/golden/selection-components/chromium/radio-selected-click.png
diff --git a/...ts/selection/test/golden/selection-components/chromium/radio-selected-space.png b/...ts/selection/test/golden/selection-components/chromium/radio-selected-space.png
diff --git a/components/selection/test/selection.vdiff.js b/components/selection/test/selection.vdiff.js
@@ -154,7 +154,8 @@ describe('selection-components', () => {
 			{ name: 'selected', template: selectedTemplate },
 			{ name: 'skeleton', template: html`<d2l-test-selection selection-single><d2l-selection-input label="item 1" key="key1" skeleton></d2l-selection-input></d2l-test-selection>` },
 			{ name: 'selected-focus', template: selectedTemplate, action: focusElem },
-			{ name: 'selected-click', template: selectedTemplate, action: clickElem }
+			{ name: 'selected-click', template: selectedTemplate, action: clickElem },
+			{ name: 'selected-space', template: selectedTemplate, action: elem => sendKeysElem(elem, 'press', 'Space') },
 		].forEach(({ name, template, action }) => {
 			it(name, async() => {
 				const elem = await fixture(template);