Fix Drawer controlled mode: Allow to open with an initial _open prope…

…rty (#7267)
public-ui · Jan 29, 2025 · 54041b1 · 54041b1
2 parents c3b8fbd + a1f9212
commit 54041b1
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 7 deletions.
diff --git a/packages/components/src/components/drawer/drawer.e2e.ts b/packages/components/src/components/drawer/drawer.e2e.ts
@@ -5,11 +5,10 @@ import { KolEvent } from '../../utils/events';
 test.describe('kol-drawer', () => {
 	test.describe('Callbacks', () => {
 		test(`should call 'onClose' callback when drawer is closed`, async ({ page }) => {
-			await page.setContent('<kol-drawer _label="Details" >Drawer content</kol-drawer>');
+			await page.setContent('<kol-drawer _label="Details" _open>Drawer content</kol-drawer>');
 			const kolDrawer = page.locator('kol-drawer');
 
 			const callbackPromise = kolDrawer.evaluate((element: HTMLKolDrawerElement) => {
-				element._open = true; // see #7165
 				return new Promise<void>((resolve) => {
 					element._on = {
 						onClose: () => {
@@ -25,6 +24,31 @@ test.describe('kol-drawer', () => {
 		});
 	});
 
+	test.describe('_open property', () => {
+		test(`should open initially when _open property is true`, async ({ page }) => {
+			await page.setContent('<kol-drawer _label="Details" _open><div data-testid="drawer-content">Drawer content</div></kol-drawer>');
+			await expect(page.getByTestId('drawer-content')).toBeVisible();
+		});
+
+		test(`should open when _open property becomes true`, async ({ page }) => {
+			await page.setContent('<kol-drawer _label="Details"><div data-testid="drawer-content">Drawer content</div></kol-drawer>');
+			const kolDrawer = page.locator('kol-drawer');
+			await kolDrawer.evaluate((element: HTMLKolDrawerElement) => {
+				element._open = true;
+			});
+			await expect(page.getByTestId('drawer-content')).toBeVisible();
+		});
+
+		test(`should close when _open property becomes false`, async ({ page }) => {
+			await page.setContent('<kol-drawer _label="Details" _open><div data-testid="drawer-content">Drawer content</div></kol-drawer>');
+			const kolDrawer = page.locator('kol-drawer');
+			await kolDrawer.evaluate((element: HTMLKolDrawerElement) => {
+				element._open = false;
+			});
+			await expect(page.getByTestId('drawer-content')).not.toBeVisible();
+		});
+	});
+
 	test.describe('DOM events', () => {
 		test(`should emit 'close' when drawer is closed`, async ({ page }) => {
 			await page.setContent('<kol-drawer _label="Details" >Drawer content</kol-drawer>');

diff --git a/packages/components/src/components/drawer/shadow.tsx b/packages/components/src/components/drawer/shadow.tsx
@@ -65,7 +65,12 @@ export class KolDrawer implements DrawerAPI {
 		);
 	}
 
-	private getRef = (el: HTMLDialogElement | undefined) => (this.dialogElement = el as HTMLDialogElement);
+	private getRef = (el: HTMLDialogElement | undefined) => {
+		this.dialogElement = el as HTMLDialogElement;
+		setTimeout(() => {
+			void this.openOrCloseBasedOnState(); // handle initial state as soon as element is ready
+		});
+	};
 	public render(): JSX.Element {
 		return (
 			<Host class="kol-drawer">
@@ -115,10 +120,22 @@ export class KolDrawer implements DrawerAPI {
 	}
 
 	@Watch('_open')
-	public async validateOpen(value?: OpenPropType): Promise<void> {
+	public validateOpen(value?: OpenPropType) {
 		if (typeof value === 'boolean') {
 			validateOpen(this, value);
-			value ? await this.open() : await this.close();
+
+			if (this.dialogElement) {
+				// handle property changes but not the initial validateOpen call
+				void this.openOrCloseBasedOnState();
+			}
+		}
+	}
+
+	private async openOrCloseBasedOnState() {
+		if (this.state._open) {
+			await this.open();
+		} else {
+			await this.close();
 		}
 	}
 
@@ -165,9 +182,9 @@ export class KolDrawer implements DrawerAPI {
 		this.dialogElement?.removeEventListener('close', this.handleClose.bind(this));
 	}
 
-	public async componentWillLoad(): Promise<void> {
+	public componentWillLoad() {
 		this.validateLabel(this._label);
-		await this.validateOpen(this._open);
+		this.validateOpen(this._open);
 		this.validateAlign(this._align);
 		this.validateOn(this._on);
 	}