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

[Select][material] Fix select menu moving on scroll when disableScrollLock is true #37773

Merged
merged 19 commits into from
Aug 24, 2023
Merged
Changes from 16 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions docs/pages/material-ui/api/popover.json
Original file line number Diff line number Diff line change
@@ -23,6 +23,8 @@
"children": { "type": { "name": "node" } },
"classes": { "type": { "name": "object" }, "additionalInfo": { "cssApi": true } },
"container": { "type": { "name": "union", "description": "HTML element<br>&#124;&nbsp;func" } },
"disableMarginThreshold": { "type": { "name": "bool" }, "default": "false" },
"disableScrollLock": { "type": { "name": "bool" }, "default": "false" },
"elevation": { "type": { "name": "custom", "description": "integer" }, "default": "8" },
"marginThreshold": { "type": { "name": "number" }, "default": "16" },
"onClose": { "type": { "name": "func" } },
4 changes: 4 additions & 0 deletions docs/translations/api-docs/popover/popover.json
Original file line number Diff line number Diff line change
@@ -21,6 +21,10 @@
"container": {
"description": "An HTML element, component instance, or function that returns either. The <code>container</code> will passed to the Modal component.<br>By default, it uses the body of the anchorEl&#39;s top-level document object, so it&#39;s simply <code>document.body</code> most of the time."
},
"disableMarginThreshold": {
"description": "Disables the margin threshold so that when scrolled the popover stays in the correct position By default, false for backward compatibility."
},
"disableScrollLock": { "description": "Disable the scroll lock behavior." },
"elevation": { "description": "The elevation of the popover." },
"marginThreshold": {
"description": "Specifies how close to the edge of the window the popover can appear."
7 changes: 7 additions & 0 deletions packages/mui-material/src/Popover/Popover.d.ts
Original file line number Diff line number Diff line change
@@ -84,6 +84,13 @@ export interface PopoverProps
* so it's simply `document.body` most of the time.
*/
container?: ModalProps['container'];
/**
* Disables the margin threshold so that when scrolled the popover stays in the correct position
* By default, false for backward compatibility.
*
* @default false
*/
disableMarginThreshold?: boolean;
DiegoAndai marked this conversation as resolved.
Show resolved Hide resolved
/**
* The elevation of the popover.
* @default 8
45 changes: 40 additions & 5 deletions packages/mui-material/src/Popover/Popover.js
Original file line number Diff line number Diff line change
@@ -125,6 +125,8 @@ const Popover = React.forwardRef(function Popover(inProps, ref) {
TransitionComponent = Grow,
transitionDuration: transitionDurationProp = 'auto',
TransitionProps: { onEntering, ...TransitionProps } = {},
disableMarginThreshold = false,
disableScrollLock = false,
...other
} = props;

@@ -244,13 +246,17 @@ const Popover = React.forwardRef(function Popover(inProps, ref) {
const widthThreshold = containerWindow.innerWidth - marginThreshold;

// Check if the vertical axis needs shifting
if (top < marginThreshold) {
if (!disableMarginThreshold && top < marginThreshold) {
DiegoAndai marked this conversation as resolved.
Show resolved Hide resolved
const diff = top - marginThreshold;

top -= diff;

elemTransformOrigin.vertical += diff;
} else if (bottom > heightThreshold) {
} else if (!disableMarginThreshold && bottom > heightThreshold) {
const diff = bottom - heightThreshold;

top -= diff;

elemTransformOrigin.vertical += diff;
}

@@ -269,7 +275,7 @@ const Popover = React.forwardRef(function Popover(inProps, ref) {
}

// Check if the horizontal axis needs shifting
if (left < marginThreshold) {
if (!disableMarginThreshold && left < marginThreshold) {
const diff = left - marginThreshold;
left -= diff;
elemTransformOrigin.horizontal += diff;
@@ -285,7 +291,14 @@ const Popover = React.forwardRef(function Popover(inProps, ref) {
transformOrigin: getTransformOriginValue(elemTransformOrigin),
};
},
[anchorEl, anchorReference, getAnchorOffset, getTransformOrigin, marginThreshold],
[
anchorEl,
anchorReference,
disableMarginThreshold,
getAnchorOffset,
getTransformOrigin,
marginThreshold,
],
);

const [isPositioned, setIsPositioned] = React.useState(open);
@@ -309,6 +322,13 @@ const Popover = React.forwardRef(function Popover(inProps, ref) {
setIsPositioned(true);
}, [getPositioningStyle]);

React.useEffect(() => {
if (disableScrollLock) {
window.addEventListener('scroll', setPositioningStyles);
}
return () => window.removeEventListener('scroll', setPositioningStyles);
}, [anchorEl, disableScrollLock, setPositioningStyles]);

const handleEntering = (element, isAppearing) => {
if (onEntering) {
onEntering(element, isAppearing);
@@ -403,7 +423,10 @@ const Popover = React.forwardRef(function Popover(inProps, ref) {
});

return (
<RootSlot {...rootProps} {...(!isHostComponent(RootSlot) && { slotProps: rootSlotPropsProp })}>
<RootSlot
{...rootProps}
{...(!isHostComponent(RootSlot) && { slotProps: rootSlotPropsProp, disableScrollLock })}
>
<TransitionComponent
appear
in={open}
@@ -525,6 +548,18 @@ Popover.propTypes /* remove-proptypes */ = {
HTMLElementType,
PropTypes.func,
]),
/**
* Disables the margin threshold so that when scrolled the popover stays in the correct position
* By default, false for backward compatibility.
*
* @default false
*/
disableMarginThreshold: PropTypes.bool,
/**
* Disable the scroll lock behavior.
* @default false
*/
disableScrollLock: PropTypes.bool,
/**
* The elevation of the popover.
* @default 8
155 changes: 89 additions & 66 deletions packages/mui-material/src/Popover/Popover.test.js
Original file line number Diff line number Diff line change
@@ -844,9 +844,12 @@ describe('<Popover />', () => {
});
});

[0, 18, 16].forEach((marginThreshold) => {
describe(`positioning when \`marginThreshold=${marginThreshold}\``, () => {
function getElementStyleOfOpenPopover(anchorEl = document.createElement('svg')) {
describe('marginThreshold', () => {
[0, 18, 16].forEach((marginThreshold) => {
function getElementStyleOfOpenPopover(
anchorEl = document.createElement('svg'),
disableMarginThreshold = false,
) {
let style;
render(
<Popover
@@ -858,105 +861,125 @@ describe('<Popover />', () => {
},
}}
marginThreshold={marginThreshold}
PaperProps={{ component: FakePaper }}
slotProps={{ paper: { component: FakePaper } }}
disableMarginThreshold={disableMarginThreshold}
>
<div />
</Popover>,
);
return style;
}

specify('when no movement is needed', () => {
const negative = marginThreshold === 0 ? '' : '-';
const positioningStyle = getElementStyleOfOpenPopover();
describe(`positioning when \`marginThreshold=${marginThreshold}\``, () => {
specify('when no movement is needed', () => {
const negative = marginThreshold === 0 ? '' : '-';
const positioningStyle = getElementStyleOfOpenPopover();

expect(positioningStyle.top).to.equal(`${marginThreshold}px`);
expect(positioningStyle.left).to.equal(`${marginThreshold}px`);
expect(positioningStyle.transformOrigin).to.match(
new RegExp(`${negative}${marginThreshold}px ${negative}${marginThreshold}px( 0px)?`),
);
});

specify('top < marginThreshold', () => {
const mockedAnchor = document.createElement('div');
stub(mockedAnchor, 'getBoundingClientRect').callsFake(() => ({
left: marginThreshold,
top: marginThreshold - 1,
}));
const positioningStyle = getElementStyleOfOpenPopover(mockedAnchor);

expect(positioningStyle.top).to.equal(`${marginThreshold}px`);
expect(positioningStyle.left).to.equal(`${marginThreshold}px`);
expect(positioningStyle.transformOrigin).to.match(/0px -1px( 0ms)?/);
});

describe('bottom > heightThreshold', () => {
let windowInnerHeight;

before(() => {
windowInnerHeight = window.innerHeight;
window.innerHeight = marginThreshold * 2;
});

after(() => {
window.innerHeight = windowInnerHeight;
expect(positioningStyle.top).to.equal(`${marginThreshold}px`);
expect(positioningStyle.left).to.equal(`${marginThreshold}px`);
expect(positioningStyle.transformOrigin).to.match(
new RegExp(`${negative}${marginThreshold}px ${negative}${marginThreshold}px( 0px)?`),
);
});

specify('test', () => {
specify('top < marginThreshold', () => {
const mockedAnchor = document.createElement('div');
stub(mockedAnchor, 'getBoundingClientRect').callsFake(() => ({
left: marginThreshold,
top: marginThreshold + 1,
top: marginThreshold - 1,
}));

const positioningStyle = getElementStyleOfOpenPopover(mockedAnchor);

expect(positioningStyle.top).to.equal(`${marginThreshold}px`);
expect(positioningStyle.left).to.equal(`${marginThreshold}px`);
expect(positioningStyle.transformOrigin).to.match(/0px 1px( 0px)?/);
expect(positioningStyle.transformOrigin).to.match(/0px -1px( 0ms)?/);
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why 0ms?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

});
});

specify('left < marginThreshold', () => {
const mockedAnchor = document.createElement('div');
stub(mockedAnchor, 'getBoundingClientRect').callsFake(() => ({
left: marginThreshold - 1,
top: marginThreshold,
}));

const positioningStyle = getElementStyleOfOpenPopover(mockedAnchor);
describe('bottom > heightThreshold', () => {
let windowInnerHeight;

expect(positioningStyle.top).to.equal(`${marginThreshold}px`);
before(() => {
windowInnerHeight = window.innerHeight;
window.innerHeight = marginThreshold * 2;
});

expect(positioningStyle.left).to.equal(`${marginThreshold}px`);
after(() => {
window.innerHeight = windowInnerHeight;
});

expect(positioningStyle.transformOrigin).to.match(/-1px 0px( 0px)?/);
});

describe('right > widthThreshold', () => {
let innerWidthContainer;
specify('test', () => {
const mockedAnchor = document.createElement('div');
stub(mockedAnchor, 'getBoundingClientRect').callsFake(() => ({
left: marginThreshold,
top: marginThreshold + 1,
}));

before(() => {
innerWidthContainer = window.innerWidth;
window.innerWidth = marginThreshold * 2;
});
const positioningStyle = getElementStyleOfOpenPopover(mockedAnchor);

after(() => {
window.innerWidth = innerWidthContainer;
expect(positioningStyle.top).to.equal(`${marginThreshold}px`);
expect(positioningStyle.left).to.equal(`${marginThreshold}px`);
expect(positioningStyle.transformOrigin).to.match(/0px 1px( 0px)?/);
});
});

specify('test', () => {
specify('left < marginThreshold', () => {
const mockedAnchor = document.createElement('div');
stub(mockedAnchor, 'getBoundingClientRect').callsFake(() => ({
left: marginThreshold + 1,
left: marginThreshold - 1,
top: marginThreshold,
}));

const positioningStyle = getElementStyleOfOpenPopover(mockedAnchor);

expect(positioningStyle.top).to.equal(`${marginThreshold}px`);

expect(positioningStyle.left).to.equal(`${marginThreshold}px`);
expect(positioningStyle.transformOrigin).to.match(/1px 0px( 0px)?/);

expect(positioningStyle.transformOrigin).to.match(/-1px 0px( 0px)?/);
});

describe('right > widthThreshold', () => {
let innerWidthContainer;

before(() => {
innerWidthContainer = window.innerWidth;
window.innerWidth = marginThreshold * 2;
});

after(() => {
window.innerWidth = innerWidthContainer;
});

specify('test', () => {
const mockedAnchor = document.createElement('div');
stub(mockedAnchor, 'getBoundingClientRect').callsFake(() => ({
left: marginThreshold + 1,
top: marginThreshold,
}));

const positioningStyle = getElementStyleOfOpenPopover(mockedAnchor);

expect(positioningStyle.top).to.equal(`${marginThreshold}px`);
expect(positioningStyle.left).to.equal(`${marginThreshold}px`);
expect(positioningStyle.transformOrigin).to.match(/1px 0px( 0px)?/);
});
});
});

describe('disableMarginThreshold', () => {
it('should not apply the marginThreshold when disableMarginThreshold is true', () => {
const lessThanThreshold = marginThreshold - 1;
const mockedAnchor = document.createElement('div');
stub(mockedAnchor, 'getBoundingClientRect').callsFake(() => ({
top: lessThanThreshold,
left: lessThanThreshold,
}));

const style = getElementStyleOfOpenPopover(mockedAnchor, true);

expect(style.top).to.equal(`${lessThanThreshold}px`);
expect(style.left).to.equal(`${lessThanThreshold}px`);
expect(style.transformOrigin).to.match(/0px 0px( 0px)?/);
});
});
});