Fix initial open state in dialog/drawer; closes #255

docs/getting-started/changelog.md

@@ -9,6 +9,7 @@ _During the beta period, these restrictions may be relaxed in the event of a mis
 ## Next
 
 - Added `no-scroll-controls` prop to `sl-tab-group`
+- Fixed a bug where setting `open` initially wouldn't show `sl-dialog` or `sl-drawer`
 - Fixed a bug where `disabled` could be set when buttons are rendered as links
 - Fixed a bug where hoisted dropdowns would render in the wrong position when place inside an `sl-dialog`
 - Improved `sl-dropdown` accessibility by attaching `aria-haspopup` and `aria-expanded` to the slotted trigger

src/components/dialog/dialog.tsx

@@ -86,7 +86,7 @@ export class Dialog {
     });
   }
 
-  componentDidLoad() {
+  componentWillLoad() {
     // Show on init if open
     if (this.open) {
       this.show();
@@ -101,7 +101,7 @@ export class Dialog {
   @Method()
   async show() {
     // Prevent subsequent calls to the method, whether manually or triggered by the `open` watcher
-    if (this.open) {
+    if (this.isVisible) {
       return;
     }
 
@@ -122,7 +122,7 @@ export class Dialog {
   @Method()
   async hide() {
     // Prevent subsequent calls to the method, whether manually or triggered by the `open` watcher
-    if (!this.open) {
+    if (!this.isVisible) {
       return;
     }
 

src/components/drawer/drawer.tsx

@@ -94,7 +94,7 @@ export class Drawer {
     });
   }
 
-  componentDidLoad() {
+  componentWillLoad() {
     // Show on init if open
     if (this.open) {
       this.show();
@@ -109,7 +109,7 @@ export class Drawer {
   @Method()
   async show() {
     // Prevent subsequent calls to the method, whether manually or triggered by the `open` watcher
-    if (this.open) {
+    if (this.isVisible) {
       return;
     }
 
@@ -133,7 +133,7 @@ export class Drawer {
   @Method()
   async hide() {
     // Prevent subsequent calls to the method, whether manually or triggered by the `open` watcher
-    if (!this.open) {
+    if (!this.isVisible) {
       return;
     }