Redocly/redoc
1
1
Fork 0
mirror of https://github.com/Redocly/redoc.git synced 2025-08-06 13:20:19 +03:00
Code Issues Packages Projects Releases Wiki Activity

Always use alternate implementation of scrollIntoViewIfNeeded

Browse Source 
Refs #1714

Refs #1742
This commit is contained in:
Aarni Koskela 2021-12-09 11:28:08 +02:00
parent 86cef81e9c
commit 546e7a768a
3 changed files with 7 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/components/SideMenu/MenuItem.tsx
View File

@ -7,6 +7,7 @@ import { shortenHTTPVerb } from '../../utils/openapi';
import { MenuItems } from './MenuItems';
import { MenuItemLabel, MenuItemLi, MenuItemTitle, OperationBadge } from './styled.elements';
import { l } from '../../services/Labels';
import { scrollIntoViewIfNeeded } from '../../utils';
export interface MenuItemProps {
item: IMenuItem;
@ -33,7 +34,7 @@ export class MenuItem extends React.Component<MenuItemProps> {
scrollIntoViewIfActive() {
if (this.props.item.active && this.ref.current) {
this.ref.current.scrollIntoViewIfNeeded();
scrollIntoViewIfNeeded(this.ref.current);
}
}
@ -77,7 +78,7 @@ export class OperationMenuItemContent extends React.Component<OperationMenuItemC
componentDidUpdate() {
if (this.props.item.active && this.ref.current) {
this.ref.current.scrollIntoViewIfNeeded();
scrollIntoViewIfNeeded(this.ref.current);
}
}

1
src/components/SideMenu/SideMenu.tsx
View File

@ -37,7 +37,6 @@ export class SideMenu extends React.Component<{ menu: MenuStore; className?: str
if (item && item.active && this.context.menuToggle) {
return item.expanded ? item.collapse() : item.expand();
}
this.props.menu.activateAndScroll(item, true);
setTimeout(() => {
if (this._updateScroll) {

11
src/utils/dom.ts
View File

@ -24,7 +24,10 @@ export function html2Str(html: string): string {
.join(' ');
}
// scrollIntoViewIfNeeded polyfill
// Alternate scrollIntoViewIfNeeded implementation.
// Used in all cases, since it seems Chrome's implementation is buggy
// when "Experimental Web Platform Features" is enabled (at least of version 96).
// See #1714, #1742
export function scrollIntoViewIfNeeded(el: HTMLElement, centerIfNeeded = true) {
const parent = el.parentNode as HTMLElement | null;
@ -72,9 +75,3 @@ export function scrollIntoViewIfNeeded(el: HTMLElement, centerIfNeeded = true) {
el.scrollIntoView(alignWithTop);
}
}
if (typeof Element !== 'undefined' && !(Element as any).prototype.scrollIntoViewIfNeeded) {
(Element as any).prototype.scrollIntoViewIfNeeded = function (centerIfNeeded = true) {
scrollIntoViewIfNeeded(this, centerIfNeeded);
};
}