Skip to content

chore: Add positioning test for scroll jumps #21878

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.

Sign up for GitHub

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

Closed
ling1726 wants to merge 6 commits into from
Closed

chore: Add positioning test for scroll jumps #21878

Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
3db8d21
chore: Add positioning test for scroll jumps
ling1726 Feb 26, 2022
2bb1c96
Update apps/vr-tests-react-components/src/stories/Positioning.stories…
ling1726 Feb 28, 2022
2770f91
fix test
ling1726 Feb 28, 2022
7d0175c
add test fr portal
ling1726 Feb 28, 2022
2b932e1
remove comment
ling1726 Feb 28, 2022
8454944
make test more stable
ling1726 Feb 28, 2022
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
138 changes: 123 additions & 15 deletions apps/vr-tests-react-components/src/stories/Positioning.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,11 +7,12 @@ import {
PopperRefHandle,
} from '@fluentui/react-positioning';
import { makeStyles, mergeClasses, shorthands } from '@griffel/react';
import { useMergedRefs } from '@fluentui/react-utilities';
import { useIsomorphicLayoutEffect, useMergedRefs } from '@fluentui/react-utilities';
import { tokens } from '@fluentui/react-theme';
import { storiesOf } from '@storybook/react';
import { useFluent } from '@fluentui/react-shared-contexts';
import Screener from 'screener-storybook/src/screener';
import { Portal } from '../../../../packages/react-portal/src/index';

const useStyles = makeStyles({
wrapper: {
Expand Down Expand Up @@ -77,6 +78,24 @@ const useStyles = makeStyles({
},
});

const LoremParagraph = () => (
<p style={{ padding: 0, margin: 0 }}>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. In fermentum et sollicitudin ac orci phasellus egestas. Facilisi cras fermentum odio eu feugiat pretium nibh
ipsum consequat. Praesent semper feugiat nibh sed pulvinar proin gravida hendrerit lectus. Porta nibh venenatis cras
sed felis eget. Enim sed faucibus turpis in. Non blandit massa enim nec dui nunc mattis. Ut eu sem integer vitae
justo. Lacus vestibulum sed arcu non. Vivamus arcu felis bibendum ut. Sagittis vitae et leo duis ut diam quam nulla
porttitor. Amet est placerat in egestas erat imperdiet. Dapibus ultrices in iaculis nunc sed augue. Risus sed
vulputate odio ut enim blandit volutpat maecenas. Orci dapibus ultrices in iaculis nunc sed augue lacus. Quam
elementum pulvinar etiam non quam. Tempor commodo ullamcorper a lacus vestibulum sed arcu. Nunc non blandit massa
enim nec. Venenatis a condimentum vitae sapien. Sodales ut eu sem integer vitae justo eget magna. In aliquam sem
fringilla ut morbi tincidunt augue. Diam volutpat commodo sed egestas egestas fringilla phasellus faucibus
scelerisque. Semper eget duis at tellus. Diam donec adipiscing tristique risus nec feugiat in fermentum posuere.
Amet volutpat consequat mauris nunc congue nisi vitae. Hendrerit gravida rutrum quisque non tellus. Aliquet eget sit
amet tellus. Libero id faucibus nisl tincidunt. Amet nulla facilisi morbi tempus iaculis urna id.
</p>
);

const positions = [
['above', 'start'],
['above', 'center'],
Expand Down Expand Up @@ -354,20 +373,7 @@ const AutoSize = () => {
>
<button ref={targetRef}>Target</button>
<Box ref={containerRef} style={{ overflow: 'auto' }}>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. In fermentum et sollicitudin ac orci phasellus egestas. Facilisi cras fermentum odio eu feugiat
pretium nibh ipsum consequat. Praesent semper feugiat nibh sed pulvinar proin gravida hendrerit lectus. Porta
nibh venenatis cras sed felis eget. Enim sed faucibus turpis in. Non blandit massa enim nec dui nunc mattis. Ut
eu sem integer vitae justo. Lacus vestibulum sed arcu non. Vivamus arcu felis bibendum ut. Sagittis vitae et leo
duis ut diam quam nulla porttitor. Amet est placerat in egestas erat imperdiet. Dapibus ultrices in iaculis nunc
sed augue. Risus sed vulputate odio ut enim blandit volutpat maecenas. Orci dapibus ultrices in iaculis nunc sed
augue lacus. Quam elementum pulvinar etiam non quam. Tempor commodo ullamcorper a lacus vestibulum sed arcu.
Nunc non blandit massa enim nec. Venenatis a condimentum vitae sapien. Sodales ut eu sem integer vitae justo
eget magna. In aliquam sem fringilla ut morbi tincidunt augue. Diam volutpat commodo sed egestas egestas
fringilla phasellus faucibus scelerisque. Semper eget duis at tellus. Diam donec adipiscing tristique risus nec
feugiat in fermentum posuere. Amet volutpat consequat mauris nunc congue nisi vitae. Hendrerit gravida rutrum
quisque non tellus. Aliquet eget sit amet tellus. Libero id faucibus nisl tincidunt. Amet nulla facilisi morbi
tempus iaculis urna id.
<LoremParagraph />
</Box>
</div>
);
Expand Down Expand Up @@ -570,3 +576,105 @@ storiesOf('Positioning', module)
</Screener>
))
.addStory('arrow', () => <Arrow />, { includeRtl: true });

const ScrollJump: React.FC<{ renderPortal?: true }> = ({ renderPortal }) => {
const buttonRef = React.useRef<HTMLButtonElement>(null);
const [open, setOpen] = React.useState(false);

useIsomorphicLayoutEffect(() => {
if (open && buttonRef.current) {
buttonRef.current.focus();
}
}, [open]);

const { containerRef, targetRef } = usePopper({
position: 'above',
align: 'start',
});

const floating = renderPortal ? (
<Portal>
<Box ref={containerRef}>
Copy link
Member

@layershifter layershifter Feb 28, 2022

Choose a reason for hiding this comment

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

nit: you can extract Box to a variable to avoid duplication

Focusable element <button ref={buttonRef}>Focus me</button>{' '}
Copy link
Member

@layershifter layershifter Feb 28, 2022

Choose a reason for hiding this comment

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

Suggested change
Focusable element <button ref={buttonRef}>Focus me</button>{' '}
Focusable element <button ref={buttonRef}>Focus me</button>

</Box>
</Portal>
) : (
<Box ref={containerRef}>
Focusable element <button ref={buttonRef}>Focus me</button>{' '}
Copy link
Member

@layershifter layershifter Feb 28, 2022

Choose a reason for hiding this comment

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

Suggested change
Focusable element <button ref={buttonRef}>Focus me</button>{' '}
Focusable element <button ref={buttonRef}>Focus me</button>

</Box>
);

return (
<div>
<LoremParagraph />
<LoremParagraph />
<LoremParagraph />
<LoremParagraph />
<LoremParagraph />
<LoremParagraph />
<LoremParagraph />
<LoremParagraph />
<LoremParagraph />
<LoremParagraph />
<LoremParagraph />
<p style={{ fontWeight: 700, color: 'green' }}>
This example simulates a scroll jump on autofocus when opening a floating element. The example uses a layout
effect to focus on the content of the floating box before usePopper is called. This results in the focus
executing before the layout effect to position the floating is executed. The scroll jump is fixed internally in
usePopper by using position: fixed on the floating element before it is first positioned.
</p>

<p style={{ fontWeight: 700, color: 'green' }}>The result should not be 0px</p>

<p style={{ fontWeight: 700, color: 'red' }}>
window.scrollY: <span id="result" />
px
</p>
<div style={{ border: '4px dotted green', overflow: 'scroll', height: 200 }}>
<LoremParagraph />
<LoremParagraph />
<LoremParagraph />
<button ref={targetRef} onClick={() => setOpen(s => !s)}>
Target
</button>
<LoremParagraph />
<LoremParagraph />
<LoremParagraph />
{open && floating}
</div>
<LoremParagraph />
<LoremParagraph />
<LoremParagraph />
</div>
);
};

storiesOf('Positioning - no scroll jumps', module)
.addStory('inline', () => {
return (
<Screener
steps={new Screener.Steps()
.focus('button')
.executeScript("document.querySelector('button').click()")
.executeScript("document.getElementById('result').innerText = Math.round(window.scrollY)")
.snapshot('Click on trigger button and record window scroll')
.end()}
>
<ScrollJump />
</Screener>
);
})
.addStory('portal', () => {
return (
<Screener
steps={new Screener.Steps()
.focus('button')
.executeScript("document.querySelector('button').click()")
.executeScript("document.getElementById('result').innerText = Math.round(window.scrollY)")
.snapshot('Click on trigger button and record window scroll')
.end()}
>
<ScrollJump renderPortal />
</Screener>
);
});