|
| 1 | +// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. |
| 2 | +// SPDX-License-Identifier: Apache-2.0 |
| 3 | + |
| 4 | +import { useEffect } from 'react'; |
| 5 | + |
| 6 | +import bodyCellStyles from './body-cell/styles.css.js'; |
| 7 | + |
| 8 | +const stickyCellSelector = `.${bodyCellStyles['sticky-cell']}`; |
| 9 | + |
| 10 | +// The scroll lock timeout value was determined empirically. |
| 11 | +// It is small enough to not interfere with sequential user events, and long enough |
| 12 | +// to ensure the browser-triggered scroll event occurs. |
| 13 | +const scrollLockTimeout = 50; |
| 14 | + |
| 15 | +// The function provides a workaround for a Chrome issue causing unexpected scroll when clicking on interactive elements |
| 16 | +// inside sticky table cells. |
| 17 | +// When an interactive element (cell editor button, row selector, or a custom interactive button or link) is clicked, it receives |
| 18 | +// focus. The browser then tries to ensure the focused element is visible on screen, and it scrolls the element into view as needed. |
| 19 | +// In Chrome, this scrolling also occurs when clicking an interactive element inside a sticky cell, despite it being fully visible. |
| 20 | +// This causes an unneeded and unexpected scroll of the table wrapper towards the sticky element (on the left or on the right). |
| 21 | +// |
| 22 | +// Note: If moving focus to an interactive element using the keyboard, the automatic scroll still happens. |
| 23 | +// That is because the implemented workaround is not suitable for focusin events due to a difference in events order. |
| 24 | +export function usePreventStickyClickScroll(wrapperRefObject: React.RefObject<HTMLDivElement>) { |
| 25 | + useEffect(() => { |
| 26 | + if (wrapperRefObject.current) { |
| 27 | + const wrapperEl = wrapperRefObject.current; |
| 28 | + const scrollLock = new ScrollLock(); |
| 29 | + |
| 30 | + // For click events inside sticky cells we capture the table wrapper scroll offset. |
| 31 | + // This is used to reset the browser-enforced scrolling that is to follow. |
| 32 | + // The scroll lock is automatically cleared after a short delay. |
| 33 | + const onClick = (event: Event) => { |
| 34 | + if ( |
| 35 | + event.target && |
| 36 | + event.target instanceof HTMLElement && |
| 37 | + (event.target.matches(stickyCellSelector) || event.target.closest(stickyCellSelector)) |
| 38 | + ) { |
| 39 | + scrollLock.set(wrapperEl.scrollLeft); |
| 40 | + } |
| 41 | + }; |
| 42 | + wrapperEl.addEventListener('click', onClick); |
| 43 | + |
| 44 | + // We cannot prevent the browser-issued scroll events from happening, and cannot cancel the default behavior. |
| 45 | + // Instead, if we detect a scroll event that immediately follows a click inside a sticky cell, we negate the |
| 46 | + // effect of it by resetting the wrapper scroll offset to its previous value. |
| 47 | + const onScroll = () => { |
| 48 | + if (scrollLock.active) { |
| 49 | + wrapperEl.scrollLeft = scrollLock.scrollLeft; |
| 50 | + scrollLock.clear(); |
| 51 | + } |
| 52 | + }; |
| 53 | + wrapperEl.addEventListener('scroll', onScroll); |
| 54 | + |
| 55 | + return () => { |
| 56 | + wrapperEl.removeEventListener('click', onClick); |
| 57 | + wrapperEl.removeEventListener('scroll', onScroll); |
| 58 | + }; |
| 59 | + } |
| 60 | + }, [wrapperRefObject]); |
| 61 | +} |
| 62 | + |
| 63 | +class ScrollLock { |
| 64 | + #timeoutId = setTimeout(() => {}, 0); |
| 65 | + #scrollLeft = 0; |
| 66 | + #active = false; |
| 67 | + |
| 68 | + public set(scrollLeft: number) { |
| 69 | + if (!this.#active) { |
| 70 | + this.#active = true; |
| 71 | + this.#scrollLeft = scrollLeft; |
| 72 | + this.#timeoutId = setTimeout(() => (this.#active = false), scrollLockTimeout); |
| 73 | + } |
| 74 | + } |
| 75 | + |
| 76 | + public clear() { |
| 77 | + this.#active = false; |
| 78 | + clearTimeout(this.#timeoutId); |
| 79 | + } |
| 80 | + |
| 81 | + public get active() { |
| 82 | + return this.#active; |
| 83 | + } |
| 84 | + |
| 85 | + public get scrollLeft() { |
| 86 | + return this.#scrollLeft; |
| 87 | + } |
| 88 | +} |
0 commit comments