From 47151435e764930ab10924e88d57a4ab8bdac43e Mon Sep 17 00:00:00 2001
From: Charles Gagnon <chgagnon@microsoft.com>
Date: Fri, 30 Jul 2021 12:39:38 -0700
Subject: [PATCH] Fix expanded state announce for dialog headers (#16499)

* Fix expanded state announce for dialog headers

* update comment
---
 .../modelComponents/groupContainer.component.ts | 17 ++++++++++-------
 1 file changed, 10 insertions(+), 7 deletions(-)

diff --git a/src/sql/workbench/browser/modelComponents/groupContainer.component.ts b/src/sql/workbench/browser/modelComponents/groupContainer.component.ts
index 068005d9b6..2f70fb365e 100644
--- a/src/sql/workbench/browser/modelComponents/groupContainer.component.ts
+++ b/src/sql/workbench/browser/modelComponents/groupContainer.component.ts
@@ -25,15 +25,18 @@ import { ILogService } from 'vs/platform/log/common/log';
 		<div *ngIf="hasHeader()" [class]="getHeaderClass()" (click)="changeState()" (keydown)="onKeyDown($event)" [tabindex]="isCollapsible()? 0 : -1" [attr.role]="isCollapsible() ? 'button' : null" [attr.aria-expanded]="isCollapsible() ? !collapsed : null">
 				{{_containerLayout.header}}
 		</div>
-		<div #container *ngIf="items" class="modelview-group-container" [ngStyle]="CSSStyles">
-			<ng-container *ngFor="let item of items">
-			<div class="modelview-group-row" >
-				<div  class="modelview-group-cell">
-				<model-component-wrapper  [descriptor]="item.descriptor" [modelStore]="modelStore" >
-				</model-component-wrapper>
+		<!-- This extra div is needed so that the expanded state of the header is updated correctly. See https://github.com/microsoft/azuredatastudio/pull/16499 for more details -->
+		<div>
+			<div #container *ngIf="items" class="modelview-group-container" [ngStyle]="CSSStyles">
+				<ng-container *ngFor="let item of items">
+				<div class="modelview-group-row" >
+					<div  class="modelview-group-cell">
+					<model-component-wrapper  [descriptor]="item.descriptor" [modelStore]="modelStore" >
+					</model-component-wrapper>
+					</div>
 				</div>
+				</ng-container>
 			</div>
-			</ng-container>
 		</div>
 	`
 })