Warning: `Infinity` is an invalid value for the `height`

Working on it.

I tested this issue locally and found that updating only ComponentOverlay.tsx resolved the warning. The issue occurred because an Infinity value was being assigned to the height CSS property. After modifying ComponentOverlay.tsx to ensure only finite and positive values using isFinite(), the warning no longer appears when dragging and dropping a component.

To fix this, update the style attribute at line number 261 in the ComponentOverlay.tsx file. This ensures rect.height * canvasViewPortScale is a valid finite number before assigning it to height.

style={{
  display: initialized ? '' : 'none',
  height: isFinite(rect.height * canvasViewPortScale) && rect.height * canvasViewPortScale > 0
    ? rect.height * canvasViewPortScale
    : 'auto',
  width: isFinite(rect.width * canvasViewPortScale) && rect.width * canvasViewPortScale > 0
    ? rect.width * canvasViewPortScale
    : 'auto',
  top: isFinite(elementOffset.verticalDistance * canvasViewPortScale)
    ? elementOffset.verticalDistance * canvasViewPortScale
    : 0,
  left: isFinite(elementOffset.horizontalDistance * canvasViewPortScale)
    ? elementOffset.horizontalDistance * canvasViewPortScale
    : 0,
}}

@divyansh.gupta Are you working on it?

I think >3 days of silence is enough to assume that's not the case.

I have updated the merge request to resolve the console error. Now, when we drag and drop a component in the canvas, no warning appears in the console. Please review and let me know if any further changes are needed. Thanks!

This will not solve the issue for slots (one col, two col). Changes should be made in SlotOverlay.tsx to also solve that issue.

@meghasharma
Previous two days were weekends so I was not active over here. Also i was working on it today and did not see new messages in this issue lately, but now that you have solved this issue its fine.

Changed the state by mistake.

Updated MR to resolve the console error for one and two column components. Let me know if any further adjustments are needed.
Thanks @omkar-pd

The issue occurred because an Infinity value was being assigned to the height CSS property.

How can this happen? 🤔

Yes @wim leers, This can happen when rect.height * canvasViewPortScale results in Infinity. This usually occurs if rect.height has an extremely large value or if canvasViewPortScale is not properly defined.

Code Looks good. But need approval from code owner. so keeping this in Needs Review.

Left a suggestion

Marking stable blocker because it's a long and disruptive console warning

Tried conditionally rendering the div using {initialized &&

} instead of just applying display: none, but the issue persists. The console still shows the 'Infinity' warning for height. Keeping the original approach with isFinite checks seems to work.

I think I found a nicer way of ensuring that infinity isn't passed to the style.

Needs review