Enonic UI: Incorrect rendering in LegacyElement children #4126

Author: edloidas

src/main/resources/assets/admin/common/js/ui2/ActionButton.ts

@@ -55,18 +55,17 @@ export class ActionButton<T extends Action = Action> extends LegacyElement<typeo
         this.updateProps();
     }
 
-    doRender(): Q.Promise<boolean> {
+    setEnabled(enabled: boolean): void {
+        this.actionProps.action.setEnabled(enabled);
+    }
+
+    protected renderJsx(): void {
         const actionButton = createElement(this.component, this.props.get());
         const tooltip = createElement(UI.Tooltip, {
             value: unwrap(this.props.get().title),
             children: actionButton,
         } satisfies UI.TooltipProps);
         render(tooltip, this.getHTMLElement());
-        return super.doRender();
-    }
-
-    setEnabled(enabled: boolean): void {
-        this.actionProps.action.setEnabled(enabled);
     }
 }
 

src/main/resources/assets/admin/common/js/ui2/ActionIcon.ts

@@ -52,18 +52,17 @@ export class ActionIcon extends LegacyElement<typeof UI.IconButton> {
         this.updateProps();
     }
 
-    doRender(): Q.Promise<boolean> {
-        const ActionIcon = h(this.component, this.props.get());
+    setEnabled(enabled: boolean): void {
+        this.actionProps.action.setEnabled(enabled);
+    }
+
+    protected renderJsx(): void {
+        const actionIcon = h(this.component, this.props.get());
         const tooltip = h(UI.Tooltip, {
             value: unwrap(this.props.get().title),
-            children: ActionIcon,
+            children: actionIcon,
         } satisfies UI.TooltipProps);
         render(tooltip, this.getHTMLElement());
-        return super.doRender();
-    }
-
-    setEnabled(enabled: boolean): void {
-        this.actionProps.action.setEnabled(enabled);
     }
 }
 

src/main/resources/assets/admin/common/js/ui2/LegacyElement.ts

@@ -26,8 +26,12 @@ export class LegacyElement<C extends ComponentType<object>, P extends ComponentP
         this.props.set({...this.props.get(), ...props});
     }
 
-    doRender(): Q.Promise<boolean> {
+    protected renderJsx(): void {
         render(createElement(this.component, this.props.get()), this.getHTMLElement());
+    }
+
+    doRender(): Q.Promise<boolean> {
+        this.renderJsx();
         return super.doRender();
     }