fix(table): prevent multiple single select radios from being selected

UjjwalUpadhyay123-bit · May 19, 2020 · 11e1bd1 · 11e1bd1
1 parent 655bcc9
commit 11e1bd1
Show file tree

Hide file tree

Showing 5 changed files with 23 additions and 11 deletions.
diff --git a/src/radio/radio.component.ts b/src/radio/radio.component.ts
@@ -35,7 +35,8 @@ import { RadioChange } from "./radio-change.class";
 			[required]="required"
 			[value]="value"
 			[attr.aria-labelledby]="ariaLabelledby"
-			(change)="onChange($event)">
+			(change)="onChange($event)"
+			(click)="onClick($event)">
 		<div *ngIf="skeleton" class="bx--radio-button bx--skeleton"></div>
 		<label
 			class="bx--radio-button__label"
@@ -124,6 +125,9 @@ export class Radio {
 	 */
 	onChange(event: Event) {
 		event.stopPropagation();
+	}
+
+	onClick(event: Event) {
 		this.checked = (event.target as HTMLInputElement).checked;
 		const radioEvent = new RadioChange(this, this.value);
 		this.change.emit(radioEvent);

diff --git a/src/table/stories/app-table.component.ts b/src/table/stories/app-table.component.ts
@@ -26,7 +26,7 @@ function sort(model, index: number) {
 			[size]="size"
 			[skeleton]="skeleton"
 			[showSelectionColumn]="showSelectionColumn"
-			[enableSingleSelect]="false"
+			[enableSingleSelect]="enableSingleSelect"
 			(rowClick)="onRowClick($event)"
 			[sortable]="sortable"
 			[stickyHeader]="stickyHeader"
@@ -41,6 +41,7 @@ export class TableStory implements OnInit, OnChanges {
 	@Input() model = new TableModel();
 	@Input() size = "md";
 	@Input() showSelectionColumn = true;
+	@Input() enableSingleSelect = false;
 	@Input() striped = true;
 	@Input() sortable = true;
 	@Input() isDataGrid = false;

diff --git a/src/table/table-adapter.class.ts b/src/table/table-adapter.class.ts
@@ -191,8 +191,11 @@ export class TableDomAdapter implements TableAdapter {
 	 */
 	findColumnIndex(cell: HTMLTableCellElement): number {
 		const row = this.getRow(this.findRowIndex(cell));
+		if (!row) {
+			return;
+		}
 		// if the cell has linked headers we can do a more accurate lookup
-		if (cell.headers) {
+		if (cell && cell.headers) {
 			const ids = cell.headers.split(" ");
 			const headerRows = Array.from(this.tableElement.tHead.rows);
 			const indexes = [];

diff --git a/src/table/table.component.ts b/src/table/table.component.ts
@@ -647,14 +647,11 @@ export class Table implements AfterViewInit, OnDestroy {
 	onSelectRow(event) {
 		// check for the existence of the selectedRowIndex property
 		if (Object.keys(event).includes("selectedRowIndex")) {
-			this.model.selectRow(event.selectedRowIndex, true);
-			this.selectRow.emit(event);
-
-			if (this.showSelectionColumn && this.enableSingleSelect) {
-				const index = event.selectedRowIndex;
+			if (this.enableSingleSelect) {
 				this.model.selectAll(false);
-				this.model.selectRow(index);
 			}
+			this.model.selectRow(event.selectedRowIndex, true);
+			this.selectRow.emit(event);
 		} else {
 			this.model.selectRow(event.deselectedRowIndex, false);
 			this.deselectRow.emit(event);

diff --git a/src/table/table.stories.ts b/src/table/table.stories.ts
@@ -124,14 +124,17 @@ storiesOf("Components|Table", module).addDecorator(
 				[stickyHeader]="stickyHeader"
 				[size]="size"
 				[skeleton]="skeleton"
+				[enableSingleSelect]="enableSingleSelect"
 				[showSelectionColumn]="showSelectionColumn"
 				[striped]="striped"
 				[sortable]="sortable"
 				[isDataGrid]="isDataGrid">
 			</app-table>
 		</ibm-table-container>
 	`,
-		props: getProps()
+		props: getProps({
+			enableSingleSelect: boolean("Enable single select", false)
+		})
 	}))
 	.add("With no data", () => ({
 		template: `
@@ -200,6 +203,7 @@ storiesOf("Components|Table", module).addDecorator(
 				[model]="model"
 				[size]="size"
 				[showSelectionColumn]="showSelectionColumn"
+				[enableSingleSelect]="enableSingleSelect"
 				[striped]="striped"
 				[sortable]="sortable"
 				[skeleton]="skeleton"
@@ -210,6 +214,7 @@ storiesOf("Components|Table", module).addDecorator(
 	`,
 		props: getProps({
 			description: text("Description", "With toolbar"),
+			enableSingleSelect: boolean("Enable single select", false),
 			batchText: object("Toolbar batch text", {
 				SINGLE: "1 item selected",
 				MULTIPLE: "{{count}} items selected"
@@ -298,6 +303,7 @@ storiesOf("Components|Table", module).addDecorator(
 				[model]="model"
 				[size]="size"
 				[showSelectionColumn]="showSelectionColumn"
+				[enableSingleSelect]="enableSingleSelect"
 				[stickyHeader]="stickyHeader"
 				[skeleton]="skeleton"
 				[striped]="striped"
@@ -307,7 +313,8 @@ storiesOf("Components|Table", module).addDecorator(
 		</ibm-table-container>
 	`,
 		props: getProps({
-			description: text("Description", "With toolbar")
+			description: text("Description", "With toolbar"),
+			enableSingleSelect: boolean("Enable single select", false)
 		})
 	}))
 	.add("With expansion", () => ({