Page MenuHomePhabricator
Files F3358315

D6052.id20870.diff
No OneTemporary
Actions

D6052.id20870.diff
View Options

diff --git a/web/chat/typeahead-tooltip.react.js b/web/chat/typeahead-tooltip.react.js
--- a/web/chat/typeahead-tooltip.react.js
+++ b/web/chat/typeahead-tooltip.react.js
@@ -8,6 +8,7 @@
import type { InputState } from '../input/input-state';
import {
+ getTypeaheadOverlayScroll,
getTypeaheadTooltipActions,
getTypeaheadTooltipButtons,
getTypeaheadTooltipPosition,
@@ -36,6 +37,8 @@
setChosenPositionInOverlay,
] = React.useState<number>(0);
+ const overlayRef = React.useRef<?HTMLDivElement>();
+
React.useEffect(() => {
setChosenPositionInOverlay(0);
}, [suggestedUsers]);
@@ -144,6 +147,17 @@
inputState.setTypeaheadState,
]);
+ React.useEffect(() => {
+ const current = overlayRef.current;
+ if (current) {
+ const newScrollTop = getTypeaheadOverlayScroll(
+ current.scrollTop,
+ chosenPositionInOverlay,
+ );
+ current.scrollTo(0, newScrollTop);
+ }
+ }, [chosenPositionInOverlay]);
+
if (suggestedUsers.length === 0) {
return null;
}
@@ -154,7 +168,11 @@
});
return (
- <div className={overlayClasses} style={tooltipPositionStyle}>
+ <div
+ ref={overlayRef}
+ className={overlayClasses}
+ style={tooltipPositionStyle}
+ >
{tooltipButtons}
</div>
);
diff --git a/web/utils/typeahead-utils.js b/web/utils/typeahead-utils.js
--- a/web/utils/typeahead-utils.js
+++ b/web/utils/typeahead-utils.js
@@ -154,6 +154,30 @@
});
}
+function getTypeaheadOverlayScroll(
+ currentScrollTop: number,
+ chosenActionPosition: number,
+): number {
+ const upperButtonBoundary = chosenActionPosition * typeaheadStyle.rowHeight;
+ const lowerButtonBoundary =
+ (chosenActionPosition + 1) * typeaheadStyle.rowHeight;
+
+ if (upperButtonBoundary < currentScrollTop) {
+ return upperButtonBoundary;
+ } else if (
+ lowerButtonBoundary - typeaheadStyle.tooltipMaxHeight >
+ currentScrollTop
+ ) {
+ return (
+ lowerButtonBoundary +
+ typeaheadStyle.tooltipVerticalPadding -
+ typeaheadStyle.tooltipMaxHeight
+ );
+ }
+
+ return currentScrollTop;
+}
+
function getTypeaheadTooltipPosition(
textarea: HTMLTextAreaElement,
actionsLength: number,
@@ -189,5 +213,6 @@
getCaretOffsets,
getTypeaheadTooltipActions,
getTypeaheadTooltipButtons,
+ getTypeaheadOverlayScroll,
getTypeaheadTooltipPosition,
};
diff --git a/web/utils/typeahead-utils.test.js b/web/utils/typeahead-utils.test.js
new file mode 100644
--- /dev/null
+++ b/web/utils/typeahead-utils.test.js
@@ -0,0 +1,32 @@
+// @flow
+
+import { typeaheadStyle } from '../chat/chat-constants';
+import { getTypeaheadOverlayScroll } from './typeahead-utils';
+
+describe('getTypeaheadOverlayScroll', () => {
+ it(
+ 'should return the same scroll position when' +
+ 'it is already scrolled to the top and changing between 2nd button',
+ () => expect(getTypeaheadOverlayScroll(0, 1)).toEqual(0),
+ );
+
+ it(
+ 'should scroll down when it is scrolled to the top' +
+ 'and changing to button out of screen',
+ () =>
+ expect(getTypeaheadOverlayScroll(0, 6)).toEqual(
+ (6 + 1) * typeaheadStyle.rowHeight +
+ typeaheadStyle.tooltipVerticalPadding -
+ typeaheadStyle.tooltipMaxHeight,
+ ),
+ );
+
+ it(
+ 'should scroll up when it is scrolled somewhere down' +
+ 'and changing to button out of screen to the top',
+ () =>
+ expect(getTypeaheadOverlayScroll(500, 3)).toEqual(
+ 3 * typeaheadStyle.rowHeight,
+ ),
+ );
+});

File Metadata

Mime Type
text/plain
Expires
Mon, Nov 25, 4:07 AM (20 h, 34 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2577791
Default Alt Text
D6052.id20870.diff (3 KB)

Event Timeline