update

ts_web/elements/sio-fab.ts

@@ -11,6 +11,7 @@ import * as domtools from '@design.estate/dees-domtools';
 
 import { SioCombox } from './sio-combox.js';
 import { SioIcon } from './sio-icon.js';
+import { state } from '@design.estate/dees-element';
 SioCombox;
 SioIcon;
 
@@ -30,6 +31,9 @@ export class SioFab extends DeesElement {
   @property({ type: Boolean })
   public showCombox = false;
 
+  @state()
+  private hasShownOnce = false;
+
   public static demo = () => html` <sio-fab .showCombox=${true}></sio-fab> `;
 
   constructor() {
@@ -190,8 +194,10 @@ export class SioFab extends DeesElement {
           <sio-icon icon="x" size="22"></sio-icon>
         </div>
       </div>
-      <div id="comboxContainer" class="${this.showCombox ? 'show' : null}">
-        <sio-combox @close=${() => this.showCombox = false}></sio-combox>
+      <div id="comboxContainer" class="${this.showCombox ? 'show' : ''}">
+        ${this.showCombox || this.hasShownOnce ? html`
+          <sio-combox @close=${() => this.showCombox = false}></sio-combox>
+        ` : ''}
       </div>
     `;
   }
@@ -202,6 +208,9 @@ export class SioFab extends DeesElement {
   public async toggleCombox() {
     console.log('toggle combox');
     this.showCombox = !this.showCombox;
+    if (this.showCombox) {
+      this.hasShownOnce = true;
+    }
   }
 
   public async firstUpdated(args) {
@@ -214,7 +223,7 @@ export class SioFab extends DeesElement {
     domtools.keyboard
       .on([domtools.keyboard.keyEnum.Ctrl, domtools.keyboard.keyEnum.S])
       .subscribe((event) => {
-        this.showCombox = !this.showCombox;
+        this.toggleCombox();
       });
   }
 }