clear timeout

Author: mabaasit

packages/browser-repl/src/components/shell-output.tsx

@@ -8,26 +8,33 @@ export type { ShellOutputEntry } from './shell-output-line';
 
 type ShellIOListProps = {
   output: ShellOutputEntry[];
-  InputPrompt: JSX.Element;
+  renderInputPrompt: () => JSX.Element;
   setScrollRef: (ref: HTMLDivElement) => void;
+  __TEST_OVERSCAN_COUNT?: number;
+  __TEST_LIST_HEIGHT?: number;
 };
 
-export const ShellIOList = ({
+export const ShellOutput = ({
   output,
-  InputPrompt,
+  renderInputPrompt,
   setScrollRef,
+  __TEST_OVERSCAN_COUNT,
+  __TEST_LIST_HEIGHT,
 }: ShellIOListProps) => {
   const listRef: VirtualListRef = useRef();
 
   useEffect(() => {
-    if (listRef.current) {
-      listRef.current.resetAfterIndex(0);
-      setTimeout(() => {
-        // After output changes, scroll to the end (which is
-        // prompt input)
-        listRef.current.scrollToItem(output.length, 'end');
-      }, 100);
+    if (!listRef.current) {
+      return;
     }
+    (window as any).listRef = listRef.current;
+    listRef.current.resetAfterIndex(0);
+    const timeout = setTimeout(() => {
+      // After output changes, scroll to the end (which is
+      // prompt input)
+      listRef.current.scrollToItem(output.length, 'end');
+    }, 100);
+    return () => clearTimeout(timeout);
   }, [output, listRef]);
 
   // Adding prompt to the input list so that its also rendered
@@ -38,21 +45,25 @@ export const ShellIOList = ({
     <VirtualList
       dataTestId="shell-output-virtual-list"
       items={items}
-      overScanCount={20}
+      overScanCount={__TEST_OVERSCAN_COUNT ?? 1}
       listRef={listRef}
       scrollableContainerRef={setScrollRef}
       renderItem={(item, ref) => {
+        if (item.type === 'inputPrompt') {
+          return (
+            <div ref={ref} data-testid="shell-input-prompt">
+              {renderInputPrompt()}
+            </div>
+          );
+        }
         return (
-          <div ref={ref}>
-            {item.type === 'inputPrompt' ? (
-              InputPrompt
-            ) : (
-              <ShellOutputLine entry={item as ShellOutputEntry} />
-            )}
+          <div ref={ref} data-testid="shell-output-line">
+            <ShellOutputLine entry={item as ShellOutputEntry} />
           </div>
         );
       }}
       estimateItemInitialHeight={() => 24}
+      __TEST_LIST_HEIGHT={__TEST_LIST_HEIGHT}
     />
   );
 };

packages/browser-repl/src/components/shell.tsx

@@ -26,7 +26,7 @@ import type { WorkerRuntime } from '@mongosh/node-runtime-worker-thread';
 import { PasswordPrompt } from './password-prompt';
 import { ShellInput } from './shell-input';
 import type { ShellOutputEntry } from './shell-output';
-import { ShellIOList } from './shell-output';
+import { ShellOutput } from './shell-output';
 
 const shellContainer = css({
   fontSize: '13px',
@@ -551,10 +551,10 @@ const _Shell: ForwardRefRenderFunction<EditorRef | null, ShellProps> = (
       )}
       onClick={onShellClicked}
     >
-      <ShellIOList
+      <ShellOutput
         setScrollRef={setScrollRef}
         output={output ?? []}
-        InputPrompt={
+        renderInputPrompt={() => (
           <div ref={shellInputContainerRef}>
             {passwordPrompt ? (
               <PasswordPrompt
@@ -580,7 +580,7 @@ const _Shell: ForwardRefRenderFunction<EditorRef | null, ShellProps> = (
               />
             )}
           </div>
-        }
+        )}
       />
     </div>
   );