Fixed issues with the chip list and editable label. Added initial collapsable-region and icon tabs code.

editable-label.js

@@ -54,12 +54,12 @@ class EditableLabel extends IgniteElement {
 
     get properties() {
         return {
+            stopEditingOnBlur: true,
             editing: false,
             value: new IgniteProperty(null, () => {
                 //Emulate a change event to support value reflection.
                 this.dispatchEvent(new Event("change"));
             }),
-            editOnClick: true,
             multiLine: false,
             saveButton: true,
             input: null,
@@ -69,6 +69,8 @@ class EditableLabel extends IgniteElement {
 
     render() {
         return this.template
+            .attribute("tabindex", "0")
+            .onFocus(e => this.onFocus())
             .child(
                 new div()
                     .innerHTML(this.value)
@@ -76,7 +78,6 @@ class EditableLabel extends IgniteElement {
                     .attribute("contenteditable", this.editing)
                     .data("placeholder", this.placeholder)
                     .ref(this.input)
-                    .onClick(() => this.onClick())
                     .onBlur(() => this.onBlur())
                     .on("keydown", (e) => this.onKeyDown(e)),
                 new button(`<i class="fas fa-check"></i>`)
@@ -93,22 +94,41 @@ class EditableLabel extends IgniteElement {
         }
     }
 
-    onClick() {
-        if (this.editOnClick) {
-            this.editing = true;
-            this.input.focus();
-        }
-    }
-
     onBlur() {
         if (this.editing) {
-            this.editing = false;
+            if (this.stopEditingOnBlur) {
+                this.editing = false;
+            }
 
             if (this.input.innerHTML !== this.value) {
                 this.value = this.input.innerHTML;
             }
         }
     }
+
+    onFocus() {
+        this.editing = true;
+        this.input.focus();
+        this.placeCaretAtEnd(this.input);
+    }
+
+    placeCaretAtEnd(el) {
+        el.focus();
+        if (typeof window.getSelection != "undefined"
+            && typeof document.createRange != "undefined") {
+            var range = document.createRange();
+            range.selectNodeContents(el);
+            range.collapse(false);
+            var sel = window.getSelection();
+            sel.removeAllRanges();
+            sel.addRange(range);
+        } else if (typeof document.body.createTextRange != "undefined") {
+            var textRange = document.body.createTextRange();
+            textRange.moveToElementText(el);
+            textRange.collapse(false);
+            textRange.select();
+        }
+    }
 }
 
 class EditableLabelTemplate extends IgniteTemplate {