Merge pull request #2789 from abiramcodes/fix/codesnippet-console-error

fix : null check console error
carbon-design-system · Feb 29, 2024 · 00e300f · 00e300f
2 parents df15727 + b24d890
commit 00e300f
Showing 1 changed file with 20 additions and 14 deletions.
diff --git a/src/code-snippet/code-snippet.component.ts b/src/code-snippet/code-snippet.component.ts
@@ -43,7 +43,9 @@ export enum SnippetType {
 					[ngClass]="{
 						'cds--snippet--light': theme === 'light'
 					}">
-					<ng-container *ngTemplateOutlet="codeTemplate"></ng-container>
+					<code #code>
+						<ng-container *ngTemplateOutlet="codeTemplate"></ng-container>
+					</code>
 				</span>
 			</ng-template>
 		</ng-container>
@@ -68,7 +70,7 @@ export enum SnippetType {
 				<pre
 					#codeContent
 					*ngIf="!skeleton"
-					(scroll)="(display === 'multi' ? handleScroll() : null)"><ng-container *ngTemplateOutlet="codeTemplate"></ng-container></pre>
+					(scroll)="(display === 'multi' ? handleScroll() : null)"><code #code><ng-container *ngTemplateOutlet="codeTemplate"></ng-container></code></pre>
 			</div>
 			<div *ngIf="hasLeft" class="cds--snippet__overflow-indicator--left"></div>
 			<div *ngIf="hasRight" class="cds--snippet__overflow-indicator--right"></div>
@@ -114,7 +116,9 @@ export enum SnippetType {
 					'tabindex': '0'
 				}">
 				<ng-container *ngIf="display === 'inline'">
-					<ng-container *ngTemplateOutlet="codeTemplate"></ng-container>
+					<code #code>
+						<ng-container *ngTemplateOutlet="codeTemplate"></ng-container>
+					</code>
 				</ng-container>
 				<ng-container *ngIf="display !== 'inline'">
 					<svg cdsIcon="copy" size="16" class="cds--snippet__icon"></svg>
@@ -123,7 +127,7 @@ export enum SnippetType {
 		</ng-template>
 
 		<ng-template #codeTemplate>
-			<code #code><ng-content></ng-content></code>
+			<ng-content></ng-content>
 		</ng-template>
 	`
 })
@@ -228,6 +232,10 @@ export class CodeSnippet extends BaseIconButton implements OnInit, AfterViewInit
 	}
 
 	handleScroll() {
+		if (this.skeleton) {
+			return;
+		}
+
 		let ref;
 		switch (this.display) {
 			case "multi":
@@ -259,7 +267,7 @@ export class CodeSnippet extends BaseIconButton implements OnInit, AfterViewInit
 	onCopyButtonClicked() {
 		if (!this.disabled) {
 			window.navigator.clipboard
-				.writeText(this.code.nativeElement.innerText || this.code.nativeElement.textContent).then(() => {
+				.writeText(this.code).then(() => {
 					this.showFeedback = true;
 					this.animating = true;
 					setTimeout(() => {
@@ -272,6 +280,11 @@ export class CodeSnippet extends BaseIconButton implements OnInit, AfterViewInit
 
 	ngOnInit() {
 		this.calculateContainerHeight();
+	}
+
+	ngAfterViewInit() {
+		this.canExpand();
+		this.handleScroll();
 		if (window) {
 			this.eventService.on(window as any, "resize", () => {
 				this.canExpand();
@@ -280,15 +293,8 @@ export class CodeSnippet extends BaseIconButton implements OnInit, AfterViewInit
 		}
 	}
 
-	ngAfterViewInit() {
-		setTimeout(() => {
-			this.canExpand();
-			this.handleScroll();
-		});
-	}
-
 	calculateContainerHeight() {
-		if (this.display === "multi") {
+		if (this.display === "multi" && !this.skeleton) {
 			this.styles = {};
 			if (this.expanded) {
 				if (this.maxExpandedNumberOfRows > 0) {
@@ -309,7 +315,7 @@ export class CodeSnippet extends BaseIconButton implements OnInit, AfterViewInit
 	}
 
 	protected canExpand() {
-		if (this.display === "multi") {
+		if (this.display === "multi" && !this.skeleton) {
 			const height = this.codeContent.nativeElement.getBoundingClientRect().height;
 			if (
 				this.maxCollapsedNumberOfRows > 0 &&