fix more morelink bugs

fullcalendar · May 10, 2021 · 276b568 · 276b568
1 parent b224c76
commit 276b568
Show file tree

Hide file tree

Showing 3 changed files with 82 additions and 72 deletions.
diff --git a/packages/__tests__/src/legacy/more-link-popover.ts b/packages/__tests__/src/legacy/more-link-popover.ts
@@ -346,8 +346,6 @@ describe('more-link popover', () => {
         expect(dateClickCalled).toBe(false)
         done()
       }, 500)
-
-      done()
     })
   })
 

diff --git a/packages/common/src/common/MoreLinkRoot.tsx b/packages/common/src/common/MoreLinkRoot.tsx
@@ -49,8 +49,8 @@ interface MoreLinkRootState {
 }
 
 export class MoreLinkRoot extends BaseComponent<MoreLinkRootProps, MoreLinkRootState> {
-  parentEl: HTMLElement | null = null
-  linkElRef = createRef<HTMLElement>()
+  private linkElRef = createRef<HTMLElement>()
+  private parentEl: HTMLElement
 
   state = {
     isPopoverOpen: false,
@@ -113,8 +113,18 @@ export class MoreLinkRoot extends BaseComponent<MoreLinkRootProps, MoreLinkRootS
     )
   }
 
-  componentDidMount() { // dom is finally inserted at this point
-    this.parentEl = elementClosest(this.linkElRef.current, '.fc-view-harness')
+  componentDidMount() {
+    this.updateParentEl()
+  }
+
+  componentDidUpdate() {
+    this.updateParentEl()
+  }
+
+  updateParentEl() {
+    if (this.linkElRef.current) {
+      this.parentEl = elementClosest(this.linkElRef.current, '.fc-view-harness')
+    }
   }
 
   handleClick = (ev: MouseEvent) => {

diff --git a/packages/daygrid/src/TableCellMoreLink.tsx b/packages/daygrid/src/TableCellMoreLink.tsx
@@ -9,8 +9,8 @@ import {
   DateProfile,
   DateRange,
   EventSegUiInteractionState,
-  Fragment,
   getSegMeta,
+  Fragment,
 } from '@fullcalendar/common'
 import { TableSegPlacement } from './event-placement'
 import { hasListItemDisplay } from './event-rendering'
@@ -40,71 +40,73 @@ export class TableCellMoreLink extends BaseComponent<TableCellMoreLinkProps> {
     let { props } = this
     let { allSegs, invisibleSegs } = this.compileSegs(props.singlePlacements)
 
-    return Boolean(props.moreCnt) && (
-      <div className="fc-daygrid-day-bottom" style={{ marginTop: props.marginTop }}>
-        <MoreLinkRoot
-          dateProfile={props.dateProfile}
-          todayRange={props.todayRange}
-          allDayDate={props.allDayDate}
-          allSegs={allSegs}
-          hiddenSegs={invisibleSegs}
-          alignmentElRef={props.alignmentElRef}
-          alignGridTop={props.alignGridTop}
-          extraDateSpan={props.extraDateSpan}
-          popoverContent={() => {
-            let isForcedInvisible =
-              (props.eventDrag ? props.eventDrag.affectedInstances : null) ||
-              (props.eventResize ? props.eventResize.affectedInstances : null) ||
-              {}
-            return (
-              <Fragment>
-                {allSegs.map((seg) => {
-                  let instanceId = seg.eventRange.instance.instanceId
-                  return (
-                    <div
-                      className="fc-daygrid-event-harness"
-                      key={instanceId}
-                      style={{
-                        visibility: isForcedInvisible[instanceId] ? 'hidden' : ('' as any),
-                      }}
-                    >
-                      {hasListItemDisplay(seg) ? (
-                        <TableListItemEvent
-                          seg={seg}
-                          isDragging={false}
-                          isSelected={instanceId === props.eventSelection}
-                          defaultDisplayEventEnd={false}
-                          {...getSegMeta(seg, props.todayRange)}
-                        />
-                      ) : (
-                        <TableBlockEvent
-                          seg={seg}
-                          isDragging={false}
-                          isResizing={false}
-                          isDateSelecting={false}
-                          isSelected={instanceId === props.eventSelection}
-                          defaultDisplayEventEnd={false}
-                          {...getSegMeta(seg, props.todayRange)}
-                        />
-                      )}
-                    </div>
-                  )
-                })}
-              </Fragment>
-            )
-          }}
-        >
-          {(rootElRef, classNames, innerElRef, innerContent, handleClick) => (
-            <a
-              ref={rootElRef}
-              className={['fc-daygrid-more-link'].concat(classNames).join(' ')}
-              onClick={handleClick}
-            >
-              {innerContent}
-            </a>
-          )}
-        </MoreLinkRoot>
-      </div>
+    return (
+      <MoreLinkRoot
+        dateProfile={props.dateProfile}
+        todayRange={props.todayRange}
+        allDayDate={props.allDayDate}
+        allSegs={allSegs}
+        hiddenSegs={invisibleSegs}
+        alignmentElRef={props.alignmentElRef}
+        alignGridTop={props.alignGridTop}
+        extraDateSpan={props.extraDateSpan}
+        popoverContent={() => {
+          let isForcedInvisible =
+            (props.eventDrag ? props.eventDrag.affectedInstances : null) ||
+            (props.eventResize ? props.eventResize.affectedInstances : null) ||
+            {}
+          return (
+            <Fragment>
+              {allSegs.map((seg) => {
+                let instanceId = seg.eventRange.instance.instanceId
+                return (
+                  <div
+                    className="fc-daygrid-event-harness"
+                    key={instanceId}
+                    style={{
+                      visibility: isForcedInvisible[instanceId] ? 'hidden' : ('' as any),
+                    }}
+                  >
+                    {hasListItemDisplay(seg) ? (
+                      <TableListItemEvent
+                        seg={seg}
+                        isDragging={false}
+                        isSelected={instanceId === props.eventSelection}
+                        defaultDisplayEventEnd={false}
+                        {...getSegMeta(seg, props.todayRange)}
+                      />
+                    ) : (
+                      <TableBlockEvent
+                        seg={seg}
+                        isDragging={false}
+                        isResizing={false}
+                        isDateSelecting={false}
+                        isSelected={instanceId === props.eventSelection}
+                        defaultDisplayEventEnd={false}
+                        {...getSegMeta(seg, props.todayRange)}
+                      />
+                    )}
+                  </div>
+                )
+              })}
+            </Fragment>
+          )
+        }}
+      >
+        {(rootElRef, classNames, innerElRef, innerContent, handleClick) => (
+          Boolean(props.moreCnt) && ( // don't render if not count!
+            <div className="fc-daygrid-day-bottom" style={{ marginTop: props.marginTop }}>
+              <a
+                ref={rootElRef}
+                className={['fc-daygrid-more-link'].concat(classNames).join(' ')}
+                onClick={handleClick}
+              >
+                {innerContent}
+              </a>
+            </div>
+          )
+        )}
+      </MoreLinkRoot>
     )
   }
 }