Attempt another bind when registering a binding outside a renderHtml() context

srcts/src/bindings/registry.ts

@@ -1,4 +1,5 @@
 import { mergeSort } from "../utils";
+import { Callbacks } from "../utils/callbacks";
 
 interface BindingBase {
   name: string;
@@ -14,6 +15,7 @@ class BindingRegistry<Binding extends BindingBase> {
   name!: string;
   bindings: Array<BindingObj<Binding>> = [];
   bindingNames: { [key: string]: BindingObj<Binding> } = {};
+  registerCallbacks: Callbacks = new Callbacks();
 
   register(binding: Binding, bindingName: string, priority = 0): void {
     const bindingObj = { binding, priority };
@@ -23,6 +25,12 @@ class BindingRegistry<Binding extends BindingBase> {
       this.bindingNames[bindingName] = bindingObj;
       binding.name = bindingName;
     }
+
+    this.registerCallbacks.invoke();
+  }
+
+  onRegister(fn: () => void, once = true): void {
+    this.registerCallbacks.register(fn, once);
   }
 
   setPriority(bindingName: string, priority: number): void {

srcts/src/shiny/init.ts

@@ -21,7 +21,7 @@ import {
 import { bindAll, unbindAll, _bindAll } from "./bind";
 import type { BindInputsCtx, BindScope } from "./bind";
 import { setShinyObj } from "./initedMethods";
-import { registerDependency } from "./render";
+import { registerDependency, renderHtml } from "./render";
 import { sendImageSizeFns } from "./sendImageSize";
 import { ShinyApp } from "./shinyapp";
 import { registerNames as singletonsRegisterNames } from "./singletons";
@@ -150,6 +150,19 @@ function initShiny(windowShiny: Shiny): void {
     (x) => x.value
   );
 
+  // When future bindings are registered via dynamic UI, check to see if renderHtml()
+  // is currently executing. If it's not, it's likely that the binding registration
+  // is occurring a tick after renderHtml()/renderContent(), in which case we need
+  // to make sure the new bindings get a chance to bind to the DOM. (#3635)
+  const debouncedBindAll = debounce(0, () => windowShiny.bindAll!(document.documentElement))
+
+  const maybeBindOnRegister = () => {
+    if (!renderHtml.isExecuting()) debouncedBindAll();
+  };
+
+  inputBindings.onRegister(maybeBindOnRegister, false);
+  outputBindings.onRegister(maybeBindOnRegister, false);
+
   // The server needs to know the size of each image and plot output element,
   // in case it is auto-sizing
   $(".shiny-image-output, .shiny-plot-output, .shiny-report-size").each(

srcts/src/shiny/render.ts

@@ -133,8 +133,13 @@ async function renderHtmlAsync(
   dependencies: HtmlDep[],
   where: WherePosition = "replace"
 ): Promise<ReturnType<typeof singletonsRenderHtml>> {
-  await renderDependenciesAsync(dependencies);
-  return singletonsRenderHtml(html, el, where);
+  renderHtml._renderCount++;
+  try {
+    await renderDependenciesAsync(dependencies);
+    return singletonsRenderHtml(html, el, where);
+  } finally {
+    renderHtml._renderCount--;
+  }
 }
 
 // Render HTML in a DOM element, inserting singletons into head as needed
@@ -144,10 +149,20 @@ function renderHtml(
   dependencies: HtmlDep[],
   where: WherePosition = "replace"
 ): ReturnType<typeof singletonsRenderHtml> {
-  renderDependencies(dependencies);
-  return singletonsRenderHtml(html, el, where);
+  renderHtml._renderCount++;
+  try {
+    renderDependencies(dependencies);
+    return singletonsRenderHtml(html, el, where);
+  } finally {
+    renderHtml._renderCount--;
+  }
 }
 
+renderHtml._renderCount = 0;
+renderHtml.isExecuting = function () {
+  return renderHtml._renderCount > 0;
+};
+
 // =============================================================================
 // renderDependencies
 // =============================================================================

srcts/src/utils/callbacks.ts

@@ -0,0 +1,45 @@
+type Cb = {
+  once: boolean;
+  fn: () => void;
+};
+
+type Cbs = {
+  [key: string]: Cb;
+};
+
+class Callbacks {
+  callbacks: Cbs = {};
+  id = 0;
+
+  register(fn: () => void, once = true): () => void {
+    this.id += 1;
+    const id = this.id;
+
+    this.callbacks[id] = { fn, once };
+    return () => {
+      delete this.callbacks[id];
+    };
+  }
+
+  invoke(): void {
+    for (const id in this.callbacks) {
+      const cb = this.callbacks[id];
+
+      try {
+        cb.fn();
+      } finally {
+        if (cb.once) delete this.callbacks[id];
+      }
+    }
+  }
+
+  clear(): void {
+    this.callbacks = {};
+  }
+
+  count(): number {
+    return Object.keys(this.callbacks).length;
+  }
+}
+
+export { Callbacks };

srcts/types/src/bindings/registry.d.ts

@@ -1,3 +1,4 @@
+import { Callbacks } from "../utils/callbacks";
 interface BindingBase {
     name: string;
 }
@@ -12,7 +13,9 @@ declare class BindingRegistry<Binding extends BindingBase> {
     bindingNames: {
         [key: string]: BindingObj<Binding>;
     };
+    registerCallbacks: Callbacks;
     register(binding: Binding, bindingName: string, priority?: number): void;
+    onRegister(fn: () => void, once?: boolean): void;
     setPriority(bindingName: string, priority: number): void;
     getPriority(bindingName: string): number | false;
     getBindings(): Array<BindingObj<Binding>>;

srcts/types/src/shiny/render.d.ts

@@ -11,6 +11,10 @@ declare function renderContent(el: BindScope, content: string | {
 } | null, where?: WherePosition): void;
 declare function renderHtmlAsync(html: string, el: BindScope, dependencies: HtmlDep[], where?: WherePosition): Promise<ReturnType<typeof singletonsRenderHtml>>;
 declare function renderHtml(html: string, el: BindScope, dependencies: HtmlDep[], where?: WherePosition): ReturnType<typeof singletonsRenderHtml>;
+declare namespace renderHtml {
+    var _renderCount: number;
+    var isExecuting: () => boolean;
+}
 declare function renderDependenciesAsync(dependencies: HtmlDep[] | null): Promise<void>;
 declare function renderDependencies(dependencies: HtmlDep[] | null): void;
 declare type HtmlDepVersion = string;

srcts/types/src/utils/callbacks.d.ts

@@ -0,0 +1,16 @@
+declare type Cb = {
+    once: boolean;
+    fn: () => void;
+};
+declare type Cbs = {
+    [key: string]: Cb;
+};
+declare class Callbacks {
+    callbacks: Cbs;
+    id: number;
+    register(fn: () => void, once?: boolean): () => void;
+    invoke(): void;
+    clear(): void;
+    count(): number;
+}
+export { Callbacks };