floating-ui icon indicating copy to clipboard operation
floating-ui copied to clipboard

when return value of the `getElementRects` is a DOMRect, only the `x` , `y` fields exist in rect in `convertOffsetParent34` method

Open naramdash opened this issue 1 year ago • 0 comments

Describe the bug A clear and concise description of what the bug is.

width, height get properties of rect are loss when using object spreading from DOMRect instance

I'm working with floating-ui/core to connect canvas(reference) and div(floating).

When I implemented the platform's required method getElementRects, I gave the floating field like below.

return {
  ...
  floating: floating.getBoundingClientRect()
}

I had an issue when I added the shift middleware.

I tracked down the issue and found that the argument rect of the convertOffsetParentRelativeRectToViewportRelativeRect function was {x, y} width, height did not exist (not even undefined or null)

To Reproduce

Steps to reproduce the behavior:

  1. using DOMRect instance to return value of Platform.getElementRects
  2. add shift middleware

Expected behavior A clear and concise description of what you expected to happen.

Rect argument of Platform.convertOffsetParentRelativeRectToViewportRelativeRect method has {x, y, width, height }

Screenshots If applicable, add screenshots to help explain your problem.

image

image

Context:

  • OS: Ubuntu 22.04
  • Browser: Microsoft Edge Version 121.0.2277.113 (Official build) (64-bit)
  • Version: "@floating-ui/core": "1.6.0"

Additional context Add any other context about the problem here.

The bug was gone, when I changed getElementRects code like below.

return {
  ...
  floating: {
    x: floatingRect.x,
    y: floatingRect.y,
    width: floatingRect.width,
    height: floatingRect.height,
  },
}

Copying values via object spreading within the core library seems to be broken for DOMRect.

Currently, type checking in typescript doesn't seem to catch this behavior.

It seems like a good idea to mention this in places like the platform documentation, or to reduce spreading techniques in core library code.

My Company development work relies heavily on floating-ui package. I appreciate your work so far.

naramdash avatar Feb 16 '24 00:02 naramdash