Fixing small focus bugs

src/cg/03-ui-components.cg

@@ -168,6 +168,8 @@ textInput = config \ ui.stateful {
     cursorX = ui.measureText textBeforeCursor;
     padding = 8;
 
+    _ = debug "focused" state.focused;
+
     ui.clip {
       w = config.w,
       h = config.h,
@@ -183,11 +185,11 @@ textInput = config \ ui.stateful {
 
           (state.focused
           | True \ ui.positioned {
-            x = 8 + cursorX - state.scrollOffset,
+              x = 8 + cursorX - state.scrollOffset,
-            y = 8,
+              y = 8,
-            child = ui.rect { w = 2, h = 24, color = config.color }
+              child = ui.rect { w = 2, h = 24, color = config.color }
-          }
+            }
-          | _ \ ui.rect { w = 0, h = 0, color = "transparent" })
+          | _ \ empty)
         ]
       }
     }

src/cg/06-inspector.cg

@@ -27,7 +27,7 @@ inspector = config \
             textInput {
               key = "palette-query" & (str i),
               initialValue = line,
-              initialFocus = False,
+              initialFocus = i == 0,
               color = "white",
               backgroundColor = "rgba(0,0,0,0.0)",
               w = contentWidth,

src/runtime-compiled.ts

@@ -43,9 +43,8 @@ export function runAppCompiled(app: App, canvas: HTMLCanvasElement, rt: any) {
 
         // Focus event to the new
         if (componentKey && componentInstances.has(componentKey)) {
-            handleComponentEvent(componentKey, { name: 'Focused' });
+            handleComponentEvent(componentKey, { _tag: 'Focused' });
         }
-        rerender();
     }
 
     function handleComponentEvent(componentKey: string, event: any) {
@@ -89,7 +88,7 @@ export function runAppCompiled(app: App, canvas: HTMLCanvasElement, rt: any) {
                     instance.view = ui.view;
                 }
 
-                if (ui.autoFocus && isNew) {
+                if (ui.autoFocus?._tag === 'True' && isNew) {
                     setFocus(fullKey);
                 }
 
@@ -144,6 +143,13 @@ export function runAppCompiled(app: App, canvas: HTMLCanvasElement, rt: any) {
             const ui = valueToUI(uiValue);
             const expandedUI = expandStateful(ui, [], renderedKeys);
 
+            // clean up unrendered instances
+            for (const key of componentInstances.keys()) {
+                if (!renderedKeys.has(key)) {
+                   componentInstances.delete(key);
+                }
+            }
+
             if (focusedComponentKey && !renderedKeys.has(focusedComponentKey)) {
                 focusedComponentKey = null;
             }