Fixed toggle controls on added content permission role rows

Author: ssddanbrown

resources/js/components/entity-permissions.js

@@ -1,6 +1,8 @@
 /**
  * @extends {Component}
  */
+import {htmlToDom} from "../services/dom";
+
 class EntityPermissions {
 
     setup() {
@@ -53,11 +55,8 @@ class EntityPermissions {
 
         // Get and insert new row
         const resp = await window.$http.get(`/permissions/form-row/${this.entityType}/${roleId}`);
-        const wrap = document.createElement('div');
-        wrap.innerHTML = resp.data;
-        const row = wrap.children[0];
+        const row = htmlToDom(resp.data);
         this.roleContainer.append(row);
-        window.components.init(row);
 
         this.roleSelect.disabled = false;
     }

resources/js/services/dom.js

@@ -117,4 +117,17 @@ export function removeLoading(element) {
     for (const el of loadingEls) {
         el.remove();
     }
+}
+
+/**
+ * Convert the given html data into a live DOM element.
+ * Initiates any components defined in the data.
+ * @param {String} html
+ * @returns {Element}
+ */
+export function htmlToDom(html) {
+    const wrap = document.createElement('div');
+    wrap.innerHTML = html;
+    window.components.init(wrap);
+    return wrap.children[0];
 }