Merge pull request #467 from nyaruka/tab-change-events

Ensure initial index doesn't fire without tabs

Author: ericnewcomer

Diff for: src/compose/Compose.ts

@@ -294,7 +294,6 @@ export class Compose extends FormElement {
   private handleTabChanged() {
     const tabs = this.shadowRoot.querySelector('temba-tabs') as TabPane;
     this.currentTab = tabs.getCurrentTab();
-
     if (this.currentTab && this.currentTab.name === 'Shortcuts') {
       const shortcuts = this.shadowRoot.querySelector(
         'temba-shortcuts'
@@ -441,9 +440,9 @@ export class Compose extends FormElement {
 
     if (line.startsWith('/')) {
       // switch to the shortcuts tab
-      const tabs = this.shadowRoot.querySelector('temba-tabs') as TabPane;
-      tabs.focusTab('Shortcuts');
-
+      if (this.currentTab.name !== 'Shortcuts') {
+        this.getTabs().focusTab('Shortcuts');
+      }
       const shortcuts = this.shadowRoot.querySelector(
         'temba-shortcuts'
       ) as ShortcutList;
@@ -489,19 +488,11 @@ export class Compose extends FormElement {
       tabs.index = num - 1;
     }
 
-    // if they type / as the first character in a line, switch to the shortcut
-    if (evt.key === '/' && this.currentTab.name !== 'Shortcuts') {
-      const line = this.getCurrentLine();
-      const text = line.text.trim();
-      if (text.trim().length === 1) {
-        evt.preventDefault();
-        tabs.index = tabs.tabs.findIndex((tab) => tab.name === 'Shortcuts');
-      }
-    } else if (evt.key === 'Backspace') {
+    if (evt.key === 'Backspace') {
       const line = this.getCurrentLine();
       const text = line.text;
       if (text === '/') {
-        tabs.index = tabs.tabs.findIndex((tab) => tab.name === 'Reply');
+        tabs.focusTab('Reply');
       }
     }
 
@@ -540,7 +531,7 @@ export class Compose extends FormElement {
   }
 
   public resetTabs() {
-    (this.shadowRoot.querySelector('temba-tabs') as TabPane).index = 0;
+    this.getTabs().focusTab('Reply');
   }
 
   public getTabs(): TabPane {
@@ -637,7 +628,6 @@ export class Compose extends FormElement {
       <temba-tabs
         embedded
         focusedname
-        index="0"
         @temba-context-changed=${this.handleTabChanged}
         refresh="${(this.currentAttachments || []).length}|${this.index}|${this
           .currentQuickReplies.length}|${showOptins}|${this

Diff for: src/tabpane/TabPane.ts

@@ -57,7 +57,7 @@ export class TabPane extends RapidElement {
 
       .tab .name {
         margin-left: 0.4em;
-        max-width: 80px;
+        max-width: 200px;
         overflow: hidden;
         transition: max-width 500ms ease-in-out, margin 500ms ease-in-out;
         white-space: nowrap;
@@ -308,6 +308,7 @@ export class TabPane extends RapidElement {
       }
     }
     this.tabs = tabs;
+    this.index = 0;
   }
 
   public firstUpdated(
@@ -322,11 +323,22 @@ export class TabPane extends RapidElement {
 
   public updated(changedProperties: Map<string, any>) {
     super.updated(changedProperties);
-    if (changedProperties.has('index') || changedProperties.has('tabs')) {
+
+    if (changedProperties.has('tabs')) {
       this.tabs.forEach((tab, index) => {
         tab.selected = index == this.index;
       });
-      this.fireEvent(CustomEventType.ContextChanged);
+    }
+
+    if (changedProperties.has('index')) {
+      if (this.tabs.length >= 0) {
+        if (this.index !== changedProperties.get('index')) {
+          this.tabs.forEach((tab, index) => {
+            tab.selected = index == this.index;
+          });
+          this.fireEvent(CustomEventType.ContextChanged);
+        }
+      }
     }
 
     // if our current tab is hidden, select the first visible one