Open kbrooks opened 6 months ago
For a menu inside a scaled div, the top and left properties on MenuPortal styles are calculated based on the viewport instead of based on the "containing block", which is the scaled div.
top
left
Fixed positioning is similar to absolute positioning, with the exception that the element's containing block is the initial containing block established by the viewport, unless any ancestor has transform, perspective, or filter property set to something other than none (see CSS Transforms Spec), which then causes that ancestor to take the place of the elements containing block. https://developer.mozilla.org/en-US/docs/Web/CSS/position#fixed_positioning
This causes the menuportal to be displayed to the bottom-right of where it should be:
The issue is simple to reproduce by placing a ReactSelect component inside of a div with a transform: scale style.
transform: scale
import React from "react"; import ReactDOM from "react-dom"; import ReactSelect from "react-select"; function Selection() { return ( <ReactSelect menuPosition="fixed" options={[ { label: "hi", value: "hi", }, { label: "bye", value: "bye", }, ]} /> ); } function FixedBox({ children }: { children: React.ReactNode }) { return ( <div style={{ margin: 100, border: "1px solid black", transform: "scale(1)", }} > <h1>fixed container</h1> {children} </div> ); } function Example() { return ( <FixedBox> <Selection /> </FixedBox> ); } ReactDOM.render(<Example />, document.getElementById("root"));
sandbox link
+1, this is a problem
Bug description
For a menu inside a scaled div, the
top
andleft
properties on MenuPortal styles are calculated based on the viewport instead of based on the "containing block", which is the scaled div.This causes the menuportal to be displayed to the bottom-right of where it should be:
The issue is simple to reproduce by placing a ReactSelect component inside of a div with a
transform: scale
style.sandbox link