Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
naramdash opened this issue Feb 16, 2024 · 0 comments · Fixed by #2850
Labels
bug Something is not working. has workaround

Comments

@naramdash
Copy link

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 naramdash changed the title return of the getElementRects is a DOMRect, only the x,y fields exist in rect in convertOffsetParent34 method when return value of the getElementRects is a DOMRect, only the x,y fields exist in rect in convertOffsetParent34 method Feb 16, 2024
@naramdash naramdash changed the title when return value of the getElementRects is a DOMRect, only the x,y fields exist in rect in convertOffsetParent34 method when return value of the getElementRects is a DOMRect, only the x,y fields exist in rect in convertOffsetParent34 method Feb 16, 2024
@naramdash naramdash changed the title when return value of the getElementRects is a DOMRect, only the x,y fields exist in rect in convertOffsetParent34 method when return value of the getElementRects is a DOMRect, only the x , y fields exist in rect in convertOffsetParent34 method Feb 16, 2024
@atomiks atomiks added bug Something is not working. has workaround and removed NEEDS: triage labels Feb 22, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something is not working. has workaround
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants