custom rendering fix (customRenderingReplaces) for rudimentary connectors

CHANGELOG.md

@@ -1,7 +1,8 @@
 
-v6.1.10 (2023-11-22)
+v6.1.10 (2023-11-28)
 --------------------
 
+- fix: Vue 3 background event with custom rendering, not receiving el in eventDidMount (#7524)
 - fix: font-icon elements should have role="img" (#7501)
 - locale: fix bg (#7493)
 - locale: fix ca (#7394)

packages/core/src/content-inject/ContentContainer.ts

@@ -26,6 +26,7 @@ export type ContentContainerProps<RenderProps> =
 
 export class ContentContainer<RenderProps> extends Component<ContentContainerProps<RenderProps>> {
   static contextType = RenderId
+  didMountMisfire?: boolean
   context: number
   el: HTMLElement
 
@@ -60,14 +61,22 @@ export class ContentContainer<RenderProps> extends Component<ContentContainerPro
 
     if (this.props.elRef) {
       setRef(this.props.elRef, el)
+
+      if (el && this.didMountMisfire) {
+        this.componentDidMount()
+      }
     }
   }
 
   componentDidMount(): void {
-    this.props.didMount?.({
-      ...this.props.renderProps,
-      el: this.el,
-    })
+    if (this.el) {
+      this.props.didMount?.({
+        ...this.props.renderProps,
+        el: this.el,
+      })
+    } else {
+      this.didMountMisfire = true
+    }
   }
 
   componentWillUnmount(): void {

packages/core/src/content-inject/ContentInjector.ts

@@ -127,7 +127,10 @@ export class ContentInjector<RenderProps> extends BaseComponent<ContentInjectorP
   }
 
   private handleEl = (el: HTMLElement | null) => {
-    if (!hasCustomRenderingHandler(this.props.generatorName, this.context.options)) {
+    const { options } = this.context
+    const { generatorName } = this.props
+
+    if (!options.customRenderingReplaces || !hasCustomRenderingHandler(generatorName, options)) {
       this.updateElRef(el)
     }
   }
@@ -164,7 +167,9 @@ ContentInjector.addPropsEquality({
 // Util
 
 /*
-Does UI-framework provide custom way of rendering?
+Does UI-framework provide custom way of rendering that does not use Preact VDOM
+AND does the calendar's options define custom rendering?
+AKA. Should we NOT render the default content?
 */
 export function hasCustomRenderingHandler(
   generatorName: string | undefined,

packages/core/src/options.ts

@@ -244,6 +244,7 @@ export const BASE_OPTION_REFINERS = {
   // (can't be part of plugin system b/c must be provided at runtime)
   handleCustomRendering: identity as Identity<CustomRenderingHandler<any>>,
   customRenderingMetaMap: identity as Identity<{ [optionName: string]: any }>,
+  customRenderingReplaces: Boolean,
 }
 
 type BuiltInBaseOptionRefiners = typeof BASE_OPTION_REFINERS