@innovastudio/contentbuilder 1.5.207 → 1.5.208

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@innovastudio/contentbuilder",
   "type": "module",
-  "version": "1.5.207",
+  "version": "1.5.208",
   "description": "",
   "main": "public/contentbuilder/contentbuilder.esm.js",
   "types": "index.d.ts",

package/public/contentbuilder/contentbuilder.esm.js

@@ -1252,17 +1252,15 @@ const renderQuickAdd = builder => {
     let elm = quickadd.querySelector('.add-paragraph');
     dom.addEventListener(elm, 'click', () => {
       const mode = quickadd.getAttribute('data-mode');
-      const html = `<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
-            Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, 
-            when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>`;
+      const html = `<p>${util.out(`Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.${''}`)}</p>`;
       util.addContent(html, mode);
     });
     elm = quickadd.querySelector('.add-headline');
     dom.addEventListener(elm, 'click', () => {
       const mode = quickadd.getAttribute('data-mode');
       const html = `<div class="display">
-                <h1>Headline Goes Here</h1>
-                <p>Lorem Ipsum is simply dummy text</p>
+                <h1>${util.out('Headline Goes Here')}</h1>
+                <p>${util.out('Lorem Ipsum is simply dummy text')}</p>
             </div>`;
       util.addContent(html, mode);
     });
@@ -1278,41 +1276,39 @@ const renderQuickAdd = builder => {
     elm = quickadd.querySelector('.add-heading1');
     dom.addEventListener(elm, 'click', () => {
       const mode = quickadd.getAttribute('data-mode');
-      const html = '<h1>Heading 1 here</h1>';
+      const html = `<h1>${util.out('Heading 1 here')}</h1>`;
       util.addContent(html, mode);
     });
     elm = quickadd.querySelector('.add-heading2');
     dom.addEventListener(elm, 'click', () => {
       const mode = quickadd.getAttribute('data-mode');
-      const html = '<h2>Heading 2 here</h2>';
+      const html = `<h2>${util.out('Heading 2 here')}</h2>`;
       util.addContent(html, mode);
     });
     elm = quickadd.querySelector('.add-heading3');
     dom.addEventListener(elm, 'click', () => {
       const mode = quickadd.getAttribute('data-mode');
-      const html = '<h3>Heading 3 here</h3>';
+      const html = `<h3>${util.out('Heading 3 here')}</h3>`;
       util.addContent(html, mode);
     });
     elm = quickadd.querySelector('.add-heading4');
     dom.addEventListener(elm, 'click', () => {
       const mode = quickadd.getAttribute('data-mode');
-      const html = '<h4>Heading 4 here</h4>';
+      const html = `<h4>${util.out('Heading 4 here')}</h4>`;
       util.addContent(html, mode);
     });
     elm = quickadd.querySelector('.add-preformatted');
     dom.addEventListener(elm, 'click', () => {
       const mode = quickadd.getAttribute('data-mode');
-      const html = `<pre>Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
-            Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, 
-            when an unknown printer took a galley of type and scrambled it to make a type specimen book.</pre>`;
+      const html = `<pre>${util.out(`Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.${''}`)}</pre>`;
       util.addContent(html, mode);
     });
     elm = quickadd.querySelector('.add-list');
     dom.addEventListener(elm, 'click', () => {
       const mode = quickadd.getAttribute('data-mode');
       const html = `<ul>
-                <li>Lorem Ipsum is simply dummy text</li>
-                <li>Lorem Ipsum is simply dummy text</li>
+                <li>${util.out('Lorem Ipsum is simply dummy text')}</li>
+                <li>${util.out('Lorem Ipsum is simply dummy text')}</li>
             </ul>`;
       util.addContent(html, mode);
     });
@@ -1325,7 +1321,7 @@ const renderQuickAdd = builder => {
             <div class="text-left">
                 <i class="icon ion-quote size-28"></i>
             </div>
-            <p class="size-21 leading-14">It's easy to use, customizable, and user-friendly. A truly amazing features.</p>
+            <p class="size-21 leading-14">${util.out(`It's easy to use, customizable, and user-friendly. A truly amazing features.${''}`)}</p>
             `;
       util.addContent(html, mode);
     });
@@ -1333,10 +1329,10 @@ const renderQuickAdd = builder => {
     dom.addEventListener(elm, 'click', () => {
       const mode = quickadd.getAttribute('data-mode');
       let html = `<div>
-    <a href="#" role="button" class="transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid mt-2 mb-1 font-normal tracking-normal rounded-full py-2 px-6 size-15 leading-14 border-transparent hover:border-transparent" style="color: rgb(24, 24, 27); background-color: rgb(240, 240, 241);" onmouseover="if(this.getAttribute('data-hover-bg'))this.style.backgroundColor=this.getAttribute('data-hover-bg');" onmouseout="if(this.getAttribute('data-bg'))this.style.backgroundColor=this.getAttribute('data-bg');else this.style.backgroundColor='';" data-bg="rgb(240, 240, 241)" data-hover-bg="rgb(236, 236, 238)">Read More</a>
+    <a href="#" role="button" class="transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid mt-2 mb-1 font-normal tracking-normal rounded-full py-2 px-6 size-15 leading-14 border-transparent hover:border-transparent" style="color: rgb(24, 24, 27); background-color: rgb(240, 240, 241);" onmouseover="if(this.getAttribute('data-hover-bg'))this.style.backgroundColor=this.getAttribute('data-hover-bg');" onmouseout="if(this.getAttribute('data-bg'))this.style.backgroundColor=this.getAttribute('data-bg');else this.style.backgroundColor='';" data-bg="rgb(240, 240, 241)" data-hover-bg="rgb(236, 236, 238)">${util.out('Read More')}</a>
 </div>`;
       if (builder.opts.emailMode) {
-        html = '<div><a href="#" role="button" style="margin-top: ;margin-right: ;margin-bottom: ;margin-left: ;display: inline-block; text-decoration: none; transition: all 0.16s ease 0s; border-style: solid; cursor: pointer; background-color: rgb(220, 220, 220); color: rgb(0, 0, 0); border-color: rgb(220, 220, 220); border-width: 2px; border-radius: 0px; padding: 13px 28px; line-height: 21px; text-transform: uppercase; font-weight: 400; font-size: 14px; letter-spacing: 3px;">Read More</a></div>';
+        html = `<div><a href="#" role="button" style="margin-top: ;margin-right: ;margin-bottom: ;margin-left: ;display: inline-block; text-decoration: none; transition: all 0.16s ease 0s; border-style: solid; cursor: pointer; background-color: rgb(220, 220, 220); color: rgb(0, 0, 0); border-color: rgb(220, 220, 220); border-width: 2px; border-radius: 0px; padding: 13px 28px; line-height: 21px; text-transform: uppercase; font-weight: 400; font-size: 14px; letter-spacing: 3px;">${util.out('Read More')}</a></div>`;
       }
       util.addContent(html, mode);
     });
@@ -1344,13 +1340,13 @@ const renderQuickAdd = builder => {
     dom.addEventListener(elm, 'click', () => {
       const mode = quickadd.getAttribute('data-mode');
       let html = `<div class="space-x-1">
-    <a href="#" role="button" class="transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid mt-2 mb-1 font-normal tracking-normal rounded-full py-2 px-6 size-15 leading-14 border-transparent hover:border-transparent" style="color: rgb(24, 24, 27); background-color: rgb(240, 240, 241);" onmouseover="if(this.getAttribute('data-hover-bg'))this.style.backgroundColor=this.getAttribute('data-hover-bg');" onmouseout="if(this.getAttribute('data-bg'))this.style.backgroundColor=this.getAttribute('data-bg');else this.style.backgroundColor='';" data-bg="rgb(240, 240, 241)" data-hover-bg="rgb(236, 236, 238)">Read More</a>
-    <a href="#" role="button" class="transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid mt-2 mb-1 font-normal tracking-normal rounded-full py-2 px-6 size-15 leading-14 border-transparent hover:border-transparent" style="color: rgb(250, 250, 250); background-color: rgb(24, 24, 27);" onmouseover="if(this.getAttribute('data-hover-bg'))this.style.backgroundColor=this.getAttribute('data-hover-bg');" onmouseout="if(this.getAttribute('data-bg'))this.style.backgroundColor=this.getAttribute('data-bg');else this.style.backgroundColor='';" data-bg="rgb(24, 24, 27)" data-hover-bg="rgb(63, 63, 70)">Get Started</a>
+    <a href="#" role="button" class="transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid mt-2 mb-1 font-normal tracking-normal rounded-full py-2 px-6 size-15 leading-14 border-transparent hover:border-transparent" style="color: rgb(24, 24, 27); background-color: rgb(240, 240, 241);" onmouseover="if(this.getAttribute('data-hover-bg'))this.style.backgroundColor=this.getAttribute('data-hover-bg');" onmouseout="if(this.getAttribute('data-bg'))this.style.backgroundColor=this.getAttribute('data-bg');else this.style.backgroundColor='';" data-bg="rgb(240, 240, 241)" data-hover-bg="rgb(236, 236, 238)">${util.out('Read More')}</a>
+    <a href="#" role="button" class="transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid mt-2 mb-1 font-normal tracking-normal rounded-full py-2 px-6 size-15 leading-14 border-transparent hover:border-transparent" style="color: rgb(250, 250, 250); background-color: rgb(24, 24, 27);" onmouseover="if(this.getAttribute('data-hover-bg'))this.style.backgroundColor=this.getAttribute('data-hover-bg');" onmouseout="if(this.getAttribute('data-bg'))this.style.backgroundColor=this.getAttribute('data-bg');else this.style.backgroundColor='';" data-bg="rgb(24, 24, 27)" data-hover-bg="rgb(63, 63, 70)">${util.out('Get Started')}</a>
 </div>`;
       if (builder.opts.emailMode) {
         html = `<div>
-                <a href="#" role="button" style="margin-top: ;margin-right: ;margin-bottom: ;margin-left: ;display: inline-block; text-decoration: none; transition: all 0.16s ease 0s; border-style: solid; cursor: pointer; background-color: rgb(220, 220, 220); color: rgb(0, 0, 0); border-color: rgb(220, 220, 220); border-width: 2px; border-radius: 0px; padding: 13px 28px; line-height: 21px; text-transform: uppercase; font-weight: 400; font-size: 14px; letter-spacing: 3px;">Read More</a> &nbsp;
-                <a href="#" role="button" style="display: inline-block; text-decoration: none; transition: all 0.16s ease 0s; border-style: solid; cursor: pointer; background-color: rgba(0, 0, 0, 0); border-color: rgb(53, 53, 53); border-width: 2px; border-radius: 0px; padding: 13px 28px; line-height: 21px; text-transform: uppercase; font-weight: 600; font-size: 14px; letter-spacing: 3px; color: rgb(53, 53, 53);">Get Started</a>
+                <a href="#" role="button" style="margin-top: ;margin-right: ;margin-bottom: ;margin-left: ;display: inline-block; text-decoration: none; transition: all 0.16s ease 0s; border-style: solid; cursor: pointer; background-color: rgb(220, 220, 220); color: rgb(0, 0, 0); border-color: rgb(220, 220, 220); border-width: 2px; border-radius: 0px; padding: 13px 28px; line-height: 21px; text-transform: uppercase; font-weight: 400; font-size: 14px; letter-spacing: 3px;">${util.out('Read More')}</a> &nbsp;
+                <a href="#" role="button" style="display: inline-block; text-decoration: none; transition: all 0.16s ease 0s; border-style: solid; cursor: pointer; background-color: rgba(0, 0, 0, 0); border-color: rgb(53, 53, 53); border-width: 2px; border-radius: 0px; padding: 13px 28px; line-height: 21px; text-transform: uppercase; font-weight: 600; font-size: 14px; letter-spacing: 3px; color: rgb(53, 53, 53);">${util.out('Get Started')}</a>
             </div>`;
       }
       util.addContent(html, mode);
@@ -1375,7 +1371,7 @@ const renderQuickAdd = builder => {
     dom.addEventListener(elm, 'click', () => {
       // const mode = quickadd.getAttribute('data-mode');
 
-      let html = '<div class="row">' + '<div class="column full" data-noedit data-html="' + encodeURIComponent('<h1 id="{id}">Lorem ipsum</h1>' + '<p>This is a code block. You can edit this block using the source dialog.</p>' + '<scr' + 'ipt>' + 'var docReady = function (fn) {' + 'var stateCheck = setInterval(function () {' + 'if (document.readyState !== "complete") return;' + 'clearInterval(stateCheck);' + 'try{fn()}catch(e){}' + '}, 1);' + '};' + 'docReady(function() {' + 'document.querySelector(\'#{id}\').innerHTML =\'<b>Hello World..!</b>\';' + '});' + '</scr' + 'ipt>') + '">' + '</div>' + '</div>';
+      let html = '<div class="row">' + '<div class="column full" data-noedit data-html="' + encodeURIComponent('<h1 id="{id}">Lorem ipsum</h1>' + `<p>${util.out('This is a code block. You can edit this block using the source dialog.')}</p>` + '<scr' + 'ipt>' + 'var docReady = function (fn) {' + 'var stateCheck = setInterval(function () {' + 'if (document.readyState !== "complete") return;' + 'clearInterval(stateCheck);' + 'try{fn()}catch(e){}' + '}, 1);' + '};' + 'docReady(function() {' + `document.querySelector('#{id}').innerHTML = '<b>${util.out('Hello World..!')}</b>';` + '});' + '</scr' + 'ipt>') + '">' + '</div>' + '</div>';
       let noedit = true;
       let bSnippet = false;
       let snippetPathReplace = builder.opts.snippetPathReplace;
@@ -5463,16 +5459,32 @@ class Util {
       if (mode === 'cell' || mode === 'cell-right') {
         dom.moveAfter(cellElement, cell);
       }
+
+      // Get firstChild
+      // let element;
+      // if (cellElement.children && cellElement.children[0]) {
+      //     element = cellElement.children[0];
+      // }
       let element;
-      if (cellElement.childNodes && cellElement.childNodes[0]) {
-        element = cellElement.childNodes[0];
+      if (cellElement.children && cellElement.children[0]) {
+        const priority = ['H1', 'H2', 'H3', 'H4', 'P', 'PRE', 'LI', 'TD'];
+        for (let i = 0; i < priority.length; i++) {
+          const found = cellElement.querySelector(priority[i]);
+          if (found) {
+            element = found;
+            break;
+          }
+        }
+        if (!element) {
+          element = cellElement.children[0];
+        }
       }
       let builderActive = this.builder.doc.querySelector('.builder-active');
       if (builderActive) this.builder.applyBehaviorOn(builderActive);
       this.fixLayout(row);
       try {
         // cellElement.click(); //change active block to the newly created
-        if (element && element.tagName.toLowerCase() === 'img') {
+        if (element && element.tagName && element.tagName.toLowerCase() === 'img') {
           element.onload = () => {
             element.click();
             element.onload = null;
@@ -5481,6 +5493,16 @@ class Util {
             }, 100);
           };
         } else if (element) {
+          // element.click();
+
+          element.focus();
+          const range = document.createRange();
+          const selection = window.getSelection();
+          range.selectNodeContents(element);
+          range.collapse(false); // false = end of element
+
+          selection.removeAllRanges();
+          selection.addRange(range);
           element.click();
         }
       } catch (e) {
@@ -5524,24 +5546,54 @@ class Util {
       }
       row.parentNode.insertBefore(rowElement, row);
       dom.moveAfter(rowElement, row);
+
+      // Get firstChild
+      // let element;
+      // if (rowElement.children && rowElement.children[0] && rowElement.children[0].children && rowElement.children[0].children[0]) {
+      //     element = rowElement.children[0].children[0];
+      // }
       let element;
-      if (rowElement.childNodes && rowElement.childNodes[0].childNodes && rowElement.childNodes[0].childNodes) {
-        element = rowElement.childNodes[0].childNodes[0];
+      if (rowElement.children && rowElement.children[0] && rowElement.children[0].children && rowElement.children[0].children[0]) {
+        const parent = rowElement.children[0];
+        const priority = ['H1', 'H2', 'H3', 'H4', 'P', 'PRE', 'LI', 'TD'];
+        for (let i = 0; i < priority.length; i++) {
+          const found = parent.querySelector(priority[i]);
+          if (found) {
+            element = found;
+            break;
+          }
+        }
+        if (!element) {
+          element = parent.children[0];
+        }
       }
       let builderActive = this.builder.doc.querySelector('.builder-active');
       if (builderActive) this.builder.applyBehaviorOn(builderActive);
+      try {
+        // cellElement.click(); //change active block to the newly created
+        if (element && element.tagName && element.tagName.toLowerCase() === 'img') {
+          element.onload = () => {
+            element.click();
+            element.onload = null;
+            setTimeout(() => {
+              this.builder.element.image.repositionImageTool();
+            }, 100);
+          };
+        } else if (element) {
+          // element.click();
 
-      // cellElement.click(); //change active block to the newly created
-      if (element && element.tagName.toLowerCase() === 'img') {
-        element.onload = () => {
+          element.focus();
+          const range = document.createRange();
+          const selection = window.getSelection();
+          range.selectNodeContents(element);
+          range.collapse(false); // false = end of element
+
+          selection.removeAllRanges();
+          selection.addRange(range);
           element.click();
-          element.onload = null;
-          setTimeout(() => {
-            this.builder.element.image.repositionImageTool();
-          }, 100);
-        };
-      } else if (element) {
-        element.click();
+        }
+      } catch (e) {
+        // Do Nothing
       }
     }
     let editingInsidePlugin = false;
@@ -5592,7 +5644,29 @@ class Util {
           }
         }, 30);
       } else {
-        newelement.click();
+        // newelement.click();
+
+        const priority = ['H1', 'H2', 'H3', 'H4', 'P', 'PRE', 'LI', 'TD'];
+        let targetElement;
+        if (priority.indexOf(newelement.tagName) !== -1) {
+          targetElement = newelement;
+        } else {
+          targetElement = newelement.querySelector('h1, h2, h3, h4, p, pre, li, td');
+          if (!targetElement && newelement.children && newelement.children[0]) {
+            targetElement = newelement.children[0];
+          }
+        }
+        if (targetElement) {
+          const range = document.createRange();
+          const selection = window.getSelection();
+          range.selectNodeContents(targetElement);
+          range.collapse(false);
+          selection.removeAllRanges();
+          selection.addRange(range);
+          targetElement.click();
+        } else {
+          newelement.click();
+        }
       }
 
       // LATER: auto scroll
@@ -5628,6 +5702,64 @@ class Util {
     template.innerHTML = html;
     return template.content.firstChild;
   }
+  autoSelect(rowElement) {
+    let element;
+    if (rowElement.children && rowElement.children[0] && rowElement.children[0].children && rowElement.children[0].children[0]) {
+      const parent = rowElement.children[0];
+      if (parent.hasAttribute('data-html')) {
+        // Module
+        setTimeout(() => {
+          parent.click();
+        }, 100);
+      } else if (parent.children[0].hasAttribute('data-cb-type')) {
+        // plugin (do not auto select)
+        setTimeout(() => {
+          parent.click();
+        }, 10);
+      } else {
+        const priority = ['H1', 'H2', 'H3', 'H4', 'P', 'PRE', 'LI', 'TD'];
+        for (let i = 0; i < priority.length; i++) {
+          const found = rowElement.querySelector(priority[i]);
+          if (found) {
+            element = found;
+            break;
+          }
+        }
+        if (!element) {
+          element = parent.children[0]; // can be anything (img, etc)
+        }
+
+        try {
+          // cellElement.click(); //change active block to the newly created
+          if (element && element.tagName && element.tagName.toLowerCase() === 'img') {
+            element.onload = () => {
+              element.click();
+              element.onload = null;
+              setTimeout(() => {
+                this.builder.element.image.repositionImageTool();
+              }, 100);
+            };
+          } else if (element) {
+            // element.click();
+
+            element.focus();
+            const range = document.createRange();
+            const selection = window.getSelection();
+            range.selectNodeContents(element);
+            range.collapse(false); // false = end of element
+
+            selection.removeAllRanges();
+            selection.addRange(range);
+            setTimeout(() => {
+              element.click();
+            }, 100);
+          }
+        } catch (e) {
+          // Do Nothing
+        }
+      }
+    }
+  }
   addSnippet(html, bSnippet, noedit) {
     this.builder.uo.saveForUndo();
     const dom = this.dom;
@@ -5704,10 +5836,13 @@ class Util {
         builderActive = this.builder.doc.querySelector('.is-builder');
         this.builder.applyBehaviorOn(builderActive);
       }
-      cellElement.click(); //change active block to the newly created
 
-      // Change to row selection
-      rowElement.className = rowElement.className.replace('row-outline', '');
+      // cellElement.click(); //change active block to the newly created
+
+      // // Change to row selection
+      // rowElement.className = rowElement.className.replace('row-outline', '');
+
+      this.autoSelect(rowElement);
 
       //Hide Column tool (new!)
       this.builder.util.hideColumnTool();
@@ -5857,9 +5992,11 @@ class Util {
         builderActive = this.builder.doc.querySelector('.is-builder');
         this.builder.applyBehaviorOn(builderActive);
       }
-      cellElement = rowElement.querySelector('div');
-      if (cellElement) cellElement.click(); //change active block to the newly created
 
+      // cellElement = rowElement.querySelector('div');
+      // if(cellElement) cellElement.click(); //change active block to the newly created
+
+      this.autoSelect(rowElement);
       const builderStuff = this.builder.builderStuff;
       let quickadd = builderStuff.querySelector('.quickadd');
       if (quickadd) this.hidePop(quickadd); // hide pop
@@ -95849,34 +95986,38 @@ class ContentBuilder {
             if (this.win.builderRuntime) this.win.builderRuntime.reinitialize(builder);
             if (newRows.length > 0) {
               let newRow = newRows[0]; // get first added row
-              if (newRow.children.length > 0) {
-                const newCol = newRow.children[0];
-                const isPlugin = newCol.querySelector('[data-cb-type]');
-                if (newCol.children.length > 0) {
-                  if (isPlugin) {
-                    setTimeout(() => {
-                      // give time for plugin to render (apply style) => for correct elm tool position
-                      newCol.children[0].click();
-                    }, 400);
-                  } else {
-                    const spacer = newCol.querySelector('.spacer');
-                    setTimeout(() => {
-                      try {
-                        if (spacer) {
-                          if (newCol.parentNode.nextElementSibling) {
-                            const elm = newCol.parentNode.nextElementSibling.querySelector('h1,h2,h3,h4,h5,h6,p,img,[data-cb-type]');
-                            if (elm) elm.click();else newCol.click();
-                          }
-                        } else {
-                          newCol.children[0].click(); // Focus on first element
-                        }
-                      } catch (e) {
-                        // Do Nothing
+
+              this.util.autoSelect(newRow);
+              /*
+              if(newRow.children.length>0) {
+                  const newCol = newRow.children[0];
+                  const isPlugin = newCol.querySelector('[data-cb-type]');
+                  if(newCol.children.length>0) {
+                      if(isPlugin) {
+                          setTimeout(()=>{ // give time for plugin to render (apply style) => for correct elm tool position
+                              newCol.children[0].click(); 
+                          }, 400);
+                      } else {
+                          const spacer = newCol.querySelector('.spacer');
+                          setTimeout(()=>{
+                              try {
+                                  if(spacer) {
+                                      if(newCol.parentNode.nextElementSibling) {
+                                          const elm = newCol.parentNode.nextElementSibling.querySelector('h1,h2,h3,h4,h5,h6,p,img,[data-cb-type]');
+                                          if(elm) elm.click();
+                                          else newCol.click();
+                                      }
+                                  } else{
+                                      newCol.children[0].click(); // Focus on first element
+                                  }
+                              } catch(e) {
+                                  // Do Nothing
+                              }
+                          }, 400);
                       }
-                    }, 400);
                   }
-                }
               }
+              */
             }
 
             //Trigger Change event