From 7d98aeb2c924e90403ae1b7dca6b98ec648ccea4 Mon Sep 17 00:00:00 2001
From: Red J Adaya <red.adaya@gmail.com>
Date: Tue, 27 Aug 2024 07:33:05 +0800
Subject: [PATCH] fix dynamic setting of suggestions modal (#272)

---
 frontend/app/modals/typeaheadmodal.less |  1 +
 frontend/app/modals/typeaheadmodal.tsx  | 43 ++++++++++++++-----------
 frontend/app/view/preview/preview.tsx   |  1 -
 3 files changed, 25 insertions(+), 20 deletions(-)

diff --git a/frontend/app/modals/typeaheadmodal.less b/frontend/app/modals/typeaheadmodal.less
index 4fc3636a4..d26263fcc 100644
--- a/frontend/app/modals/typeaheadmodal.less
+++ b/frontend/app/modals/typeaheadmodal.less
@@ -34,6 +34,7 @@
     border: 0.5px solid var(--modal-border-color);
     background: var(--modal-bg-color);
     box-shadow: 0px 8px 32px 0px rgba(0, 0, 0, 0.25);
+    height: auto;
 
     .modal-close-btn {
         position: absolute;
diff --git a/frontend/app/modals/typeaheadmodal.tsx b/frontend/app/modals/typeaheadmodal.tsx
index 27d7a432f..4f84c45ed 100644
--- a/frontend/app/modals/typeaheadmodal.tsx
+++ b/frontend/app/modals/typeaheadmodal.tsx
@@ -2,7 +2,7 @@ import { Input } from "@/app/element/input";
 import { InputDecoration } from "@/app/element/inputdecoration";
 import { useDimensions } from "@/app/hook/useDimensions";
 import clsx from "clsx";
-import React, { useEffect, useRef, useState } from "react";
+import React, { forwardRef, useEffect, useRef, useState } from "react";
 import ReactDOM from "react-dom";
 
 import "./typeaheadmodal.less";
@@ -81,15 +81,9 @@ interface SuggestionsProps {
     onSelect?: (_: string) => void;
 }
 
-function Suggestions({ suggestions, onSelect }: SuggestionsProps) {
-    const suggestionsWrapperRef = useRef<HTMLDivElement>(null);
-
+const Suggestions = forwardRef<HTMLDivElement, SuggestionsProps>(({ suggestions, onSelect }: SuggestionsProps, ref) => {
     return (
-        <div
-            ref={suggestionsWrapperRef}
-            className="suggestions-wrapper"
-            style={{ marginTop: suggestions?.length > 0 ? "8px" : "0" }}
-        >
+        <div ref={ref} className="suggestions-wrapper" style={{ marginTop: suggestions?.length > 0 ? "8px" : "0" }}>
             {suggestions?.map((suggestion, index) => (
                 <div className="suggestion" key={index} onClick={() => onSelect(suggestion.value)}>
                     {suggestion.label}
@@ -97,7 +91,7 @@ function Suggestions({ suggestions, onSelect }: SuggestionsProps) {
             ))}
         </div>
     );
-}
+});
 
 interface TypeAheadModalProps {
     anchor: React.MutableRefObject<HTMLDivElement>;
@@ -125,20 +119,31 @@ const TypeAheadModal = ({
     const { width, height } = useDimensions(anchor);
     const modalRef = useRef<HTMLDivElement>(null);
     const inputRef = useRef<HTMLDivElement>(null);
+    const suggestionsWrapperRef = useRef<HTMLDivElement>(null);
     const [suggestionsHeight, setSuggestionsHeight] = useState<number | undefined>(undefined);
+    const [modalHeight, setModalHeight] = useState<string | undefined>(undefined);
 
     useEffect(() => {
-        if (modalRef.current && inputRef.current) {
-            const modalHeight = modalRef.current.getBoundingClientRect().height;
+        if (modalRef.current && inputRef.current && suggestionsWrapperRef.current) {
+            const modalPadding = 32;
             const inputHeight = inputRef.current.getBoundingClientRect().height;
+            let suggestionsTotalHeight = 0;
 
-            // Get the padding value (assuming padding is uniform on all sides)
-            const padding = 16 * 2; // 16px top + 16px bottom
+            const suggestionItems = suggestionsWrapperRef.current.children;
+            for (let i = 0; i < suggestionItems.length; i++) {
+                suggestionsTotalHeight += suggestionItems[i].getBoundingClientRect().height;
+            }
 
-            // Subtract the input height and padding from the modal height
-            setSuggestionsHeight(modalHeight - inputHeight - padding);
+            const totalHeight = modalPadding + inputHeight + suggestionsTotalHeight;
+            const maxHeight = height * 0.8;
+            const computedHeight = totalHeight > maxHeight ? maxHeight : totalHeight;
+
+            setModalHeight(`${computedHeight}px`);
+
+            const padding = 16 * 2;
+            setSuggestionsHeight(computedHeight - inputHeight - padding);
         }
-    }, [width, height]);
+    }, [height, suggestions.length]);
 
     const renderBackdrop = (onClick) => <div className="type-ahead-modal-backdrop" onClick={onClick}></div>;
 
@@ -162,7 +167,7 @@ const TypeAheadModal = ({
                 className={clsx("type-ahead-modal", className)}
                 style={{
                     width: width * 0.6,
-                    maxHeight: height * 0.8,
+                    maxHeight: modalHeight,
                 }}
             >
                 <div className="content-wrapper">
@@ -187,7 +192,7 @@ const TypeAheadModal = ({
                             overflowY: "auto",
                         }}
                     >
-                        <Suggestions suggestions={suggestions} onSelect={handleSelect} />
+                        <Suggestions ref={suggestionsWrapperRef} suggestions={suggestions} onSelect={handleSelect} />
                     </div>
                 </div>
             </div>
diff --git a/frontend/app/view/preview/preview.tsx b/frontend/app/view/preview/preview.tsx
index 756f0509c..e61fb42e9 100644
--- a/frontend/app/view/preview/preview.tsx
+++ b/frontend/app/view/preview/preview.tsx
@@ -687,7 +687,6 @@ function PreviewView({ blockId, model }: { blockId: string; model: PreviewModel
                     anchor={contentRef}
                     onKeyDown={(e) => keyutil.keydownWrapper(handleKeyDown)(e)}
                     onSelect={handleFileSuggestionSelect}
-                    onSubmit={(value) => console.log(value)}
                 />
             )}
             <div