fix(data-grid): fix error on createElement (VIV-2289) (#2094)

* Fix data grid setting tabIndex attribute during construction * Add test --------- Co-authored-by: Yonatan Kra <[email protected]>
Vonage · Jan 28, 2025 · 4b17c6c · 4b17c6c
1 parent 1a52637
commit 4b17c6c
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 7 deletions.
diff --git a/libs/components/src/lib/data-grid/data-grid.spec.ts b/libs/components/src/lib/data-grid/data-grid.spec.ts
@@ -41,6 +41,13 @@ describe('vwc-data-grid', () => {
 			expect(element.rowElementTag).toBe('vwc-data-grid-row');
 			expect(element.selectionMode).toBeUndefined();
 		});
+
+		it('should allow being created via createElement', () => {
+			// createElement may fail even though indirect instantiation through innerHTML etc. succeeds
+			// This is because only createElement performs checks for custom element constructor requirements
+			// See https://html.spec.whatwg.org/multipage/custom-elements.html#custom-element-conformance
+			expect(() => document.createElement(COMPONENT_TAG)).not.toThrow();
+		});
 	});
 
 	describe('noTabbing', () => {

diff --git a/libs/components/src/lib/data-grid/data-grid.ts b/libs/components/src/lib/data-grid/data-grid.ts
@@ -147,16 +147,18 @@ export class DataGrid extends VividElement {
 	 * @internal
 	 */
 	noTabbingChanged(): void {
-		if (this.noTabbing) {
-			this.setAttribute('tabIndex', '-1');
-		} else {
-			this.setAttribute(
-				'tabIndex',
-				this.contains(document.activeElement) ? '-1' : '0'
-			);
+		if (this.$fastController.isConnected) {
+			this.#setTabIndex();
 		}
 	}
 
+	#setTabIndex() {
+		this.setAttribute(
+			'tabIndex',
+			this.noTabbing || this.contains(document.activeElement) ? '-1' : '0'
+		);
+	}
+
 	/**
 	 *  Whether the grid should automatically generate a header row and its type
 	 *
@@ -384,6 +386,8 @@ export class DataGrid extends VividElement {
 
 		DOM.queueUpdate(this.queueRowIndexUpdate);
 
+		this.#setTabIndex();
+
 		Observable.getNotifier(this).subscribe(
 			this.#changeHandler,
 			'columnDefinitions'