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.

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

Jump to bottom

fix(Popper): fixed flicker when opening popper content #9339

Merged
merged 3 commits into from
Aug 1, 2023
Merged

fix(Popper): fixed flicker when opening popper content #9339

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
b83d7a8
fix(Popper): fixed flicker when opening popper content
wise-king-sullyman Jul 6, 2023
3b58c39
fixed re-focus delay when closing popover
wise-king-sullyman Jul 10, 2023
c54f919
updated DatePicker test to have consistent value
wise-king-sullyman Jul 10, 2023
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: 1 addition & 1 deletion packages/react-core/src/components/DataList/__tests__/__snapshots__/DataList.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -164,7 +164,7 @@ exports[`DataList DataListAction dropdown 1`] = `
data-ouia-component-id="OUIA-Generated-Dropdown-1"
data-ouia-component-type="PF5/Dropdown"
data-ouia-safe="true"
style="position: absolute; left: 0px; top: 0px; z-index: 9999;"
style="position: absolute; left: 0px; top: 0px; z-index: 9999; opacity: 0; transition: opacity 0ms cubic-bezier(.54, 1.5, .38, 1.11);"
>
<div
class="pf-v5-c-menu__content"
Expand Down
207 changes: 149 additions & 58 deletions ...ges/react-core/src/components/DatePicker/__tests__/__snapshots__/DatePicker.test.tsx.snap
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion packages/react-core/src/components/Nav/__tests__/__snapshots__/Nav.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1096,7 +1096,7 @@ exports[`Nav Nav List with flyout 1`] = `
data-popper-escaped="true"
data-popper-placement="right-start"
data-popper-reference-hidden="true"
style="position: absolute; left: 0px; top: 0px; z-index: 9999; min-width: 0px; transform: translate(0px, 0px);"
style="position: absolute; left: 0px; top: 0px; z-index: 9999; opacity: 0; transition: opacity 0ms cubic-bezier(.54, 1.5, .38, 1.11); min-width: 0px; transform: translate(0px, 0px);"
>
<div>
Flyout test
Expand Down
42 changes: 10 additions & 32 deletions packages/react-core/src/components/Popover/Popover.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ import popoverMaxWidth from '@patternfly/react-tokens/dist/esm/c_popover_MaxWidt
import popoverMinWidth from '@patternfly/react-tokens/dist/esm/c_popover_MinWidth';
import { ReactElement } from 'react';
import { FocusTrap } from '../../helpers';
import { Popper, getOpacityTransition } from '../../helpers/Popper/Popper';
import { Popper } from '../../helpers/Popper/Popper';
import { getUniqueId } from '../../helpers/util';

export enum PopoverPosition {
Expand Down Expand Up @@ -273,11 +273,7 @@ export const Popover: React.FunctionComponent<PopoverProps> = ({
const uniqueId = id || getUniqueId();
const triggerManually = isVisible !== null;
const [visible, setVisible] = React.useState(false);
const [opacity, setOpacity] = React.useState(0);
const [focusTrapActive, setFocusTrapActive] = React.useState(Boolean(propWithFocusTrap));
const transitionTimerRef = React.useRef(null);
const showTimerRef = React.useRef(null);
const hideTimerRef = React.useRef(null);
const popoverRef = React.useRef(null);

React.useEffect(() => {
Expand All @@ -294,34 +290,15 @@ export const Popover: React.FunctionComponent<PopoverProps> = ({
}, [isVisible, triggerManually]);
const show = (event?: MouseEvent | KeyboardEvent, withFocusTrap?: boolean) => {
event && onShow(event);

if (transitionTimerRef.current) {
clearTimeout(transitionTimerRef.current);
}
if (hideTimerRef.current) {
clearTimeout(hideTimerRef.current);
}
showTimerRef.current = setTimeout(() => {
setVisible(true);
setOpacity(1);
propWithFocusTrap !== false && withFocusTrap && setFocusTrapActive(true);
onShown();
}, 0);
setVisible(true);
propWithFocusTrap !== false && withFocusTrap && setFocusTrapActive(true);
};

const hide = (event?: MouseEvent | KeyboardEvent) => {
event && onHide(event);
if (showTimerRef.current) {
clearTimeout(showTimerRef.current);
}
hideTimerRef.current = setTimeout(() => {
setVisible(false);
setOpacity(0);
setFocusTrapActive(false);
transitionTimerRef.current = setTimeout(() => {
onHidden();
}, animationDuration);
}, 0);
setVisible(false);
};

const positionModifiers = {
top: styles.modifiers.top,
bottom: styles.modifiers.bottom,
Expand Down Expand Up @@ -426,9 +403,7 @@ export const Popover: React.FunctionComponent<PopoverProps> = ({
onMouseDown={onContentMouseDown}
style={{
minWidth: hasCustomMinWidth ? minWidth : null,
maxWidth: hasCustomMaxWidth ? maxWidth : null,
opacity,
transition: getOpacityTransition(animationDuration)
maxWidth: hasCustomMaxWidth ? maxWidth : null
}}
{...rest}
>
Expand Down Expand Up @@ -477,6 +452,9 @@ export const Popover: React.FunctionComponent<PopoverProps> = ({
enableFlip={enableFlip}
zIndex={zIndex}
flipBehavior={flipBehavior}
animationDuration={animationDuration}
onHidden={onHidden}
onShown={onShown}
/>
</PopoverContext.Provider>
);
Expand Down
16 changes: 15 additions & 1 deletion ...s/react-core/src/components/SearchInput/__tests__/__snapshots__/SearchInput.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -130,6 +130,13 @@ exports[`SearchInput advanced search 1`] = `
</button>
</div>
</div>
<div
class=""
data-popper-escaped="true"
data-popper-placement="bottom-start"
data-popper-reference-hidden="true"
style="position: absolute; left: 0px; top: 0px; z-index: 9999; opacity: 1; transition: opacity 0ms cubic-bezier(.54, 1.5, .38, 1.11); min-width: 0px; transform: translate(0px, 0px);"
/>
</div>
</DocumentFragment>
`;
Expand Down Expand Up @@ -270,7 +277,7 @@ exports[`SearchInput advanced search with custom attributes 1`] = `
data-popper-escaped="true"
data-popper-placement="bottom-start"
data-popper-reference-hidden="true"
style="position: absolute; top: 0px; left: 0px; transform: translate(0px, 0px); min-width: 0px; z-index: 9999;"
style="position: absolute; top: 0px; left: 0px; transform: translate(0px, 0px); min-width: 0px; z-index: 9999; opacity: 1; transition: opacity 0ms cubic-bezier(.54, 1.5, .38, 1.11);"
>
<div
class="pf-v5-c-panel pf-m-raised"
Expand Down Expand Up @@ -599,6 +606,13 @@ exports[`SearchInput renders search input in strict mode 1`] = `
</button>
</div>
</div>
<div
class=""
data-popper-escaped="true"
data-popper-placement="bottom-start"
data-popper-reference-hidden="true"
style="position: absolute; left: 0px; top: 0px; z-index: 9999; opacity: 1; transition: opacity 0ms cubic-bezier(.54, 1.5, .38, 1.11); min-width: 0px; transform: translate(0px, 0px);"
/>
</div>
</DocumentFragment>
`;
Expand Down
61 changes: 8 additions & 53 deletions packages/react-core/src/components/Tooltip/Tooltip.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import { TooltipArrow } from './TooltipArrow';
import { KeyTypes } from '../../helpers/constants';
import tooltipMaxWidth from '@patternfly/react-tokens/dist/esm/c_tooltip_MaxWidth';
import { ReactElement } from 'react';
import { Popper, getOpacityTransition } from '../../helpers/Popper/Popper';
import { Popper } from '../../helpers/Popper/Popper';

export enum TooltipPosition {
auto = 'auto',
Expand Down Expand Up @@ -174,30 +174,8 @@ export const Tooltip: React.FunctionComponent<TooltipProps> = ({
const triggerOnClick = trigger.includes('click');
const triggerManually = trigger === 'manual';
const [visible, setVisible] = React.useState(false);
const [opacity, setOpacity] = React.useState(0);
const transitionTimerRef = React.useRef(null);
const showTimerRef = React.useRef(null);
const hideTimerRef = React.useRef(null);
const popperRef = React.createRef<HTMLDivElement>();

const prevExitDelayRef = React.useRef<number>();

const clearTimeouts = (timeoutRefs: React.RefObject<any>[]) => {
timeoutRefs.forEach((ref) => {
if (ref.current) {
clearTimeout(ref.current);
}
});
};

// Cancel all timers on unmount
React.useEffect(
() => () => {
clearTimeouts([transitionTimerRef, hideTimerRef, showTimerRef]);
},
[]
);

const onDocumentKeyDown = (event: KeyboardEvent) => {
if (!triggerManually) {
if (event.key === KeyTypes.Escape && visible) {
Expand All @@ -222,36 +200,11 @@ export const Tooltip: React.FunctionComponent<TooltipProps> = ({
}
}, [isVisible]);

React.useEffect(() => {
if (prevExitDelayRef.current < exitDelay) {
clearTimeouts([transitionTimerRef, hideTimerRef]);
hideTimerRef.current = setTimeout(() => {
setOpacity(0);
transitionTimerRef.current = setTimeout(() => {
setVisible(false);
onTooltipHidden();
}, animationDuration);
}, exitDelay);
}
prevExitDelayRef.current = exitDelay;
}, [exitDelay]);

const show = () => {
clearTimeouts([transitionTimerRef, hideTimerRef]);
showTimerRef.current = setTimeout(() => {
setVisible(true);
setOpacity(1);
}, entryDelay);
setVisible(true);
};
const hide = () => {
clearTimeouts([showTimerRef]);
hideTimerRef.current = setTimeout(() => {
setOpacity(0);
transitionTimerRef.current = setTimeout(() => {
setVisible(false);
onTooltipHidden();
}, animationDuration);
}, exitDelay);
setVisible(false);
};
const positionModifiers = {
top: styles.modifiers.top,
Expand All @@ -275,9 +228,7 @@ export const Tooltip: React.FunctionComponent<TooltipProps> = ({
role="tooltip"
id={id}
style={{
maxWidth: hasCustomMaxWidth ? maxWidth : null,
opacity,
transition: getOpacityTransition(animationDuration)
maxWidth: hasCustomMaxWidth ? maxWidth : null
}}
ref={popperRef}
{...rest}
Expand Down Expand Up @@ -342,6 +293,10 @@ export const Tooltip: React.FunctionComponent<TooltipProps> = ({
enableFlip={enableFlip}
zIndex={zIndex}
flipBehavior={flipBehavior}
animationDuration={animationDuration}
entryDelay={entryDelay}
exitDelay={exitDelay}
onHidden={onTooltipHidden}
/>
);
};
Expand Down
Loading
Loading