fix: make dropdown height adjust to screen

standardnotes · May 24, 2021 · e258520 · e258520
1 parent c230cde
commit e258520
Showing 1 changed file with 14 additions and 3 deletions.
diff --git a/app/assets/javascripts/components/AutocompleteTagInput.tsx b/app/assets/javascripts/components/AutocompleteTagInput.tsx
@@ -18,6 +18,7 @@ export const AutocompleteTagInput: FunctionalComponent<Props> = ({
 }) => {
   const [searchQuery, setSearchQuery] = useState('');
   const [dropdownVisible, setDropdownVisible] = useState(false);
+  const [dropdownMaxHeight, setDropdownMaxHeight] = useState<number | 'auto'>('auto');
 
   const getActiveNoteTagResults = (query: string) => {
     const { activeNote } = appState.notes;
@@ -28,11 +29,19 @@ export const AutocompleteTagInput: FunctionalComponent<Props> = ({
     return getActiveNoteTagResults('');
   });
 
+  const inputRef = useRef<HTMLInputElement>();
   const dropdownRef = useRef<HTMLDivElement>();
   const [closeOnBlur] = useCloseOnBlur(dropdownRef, (visible: boolean) =>
     setDropdownVisible(visible)
   );
 
+  const showDropdown = () => {
+    const { clientHeight } = document.documentElement;
+    const inputRect = inputRef.current.getBoundingClientRect();
+    setDropdownMaxHeight(clientHeight - inputRect.bottom - 32*2);
+    setDropdownVisible(true);
+  };
+
   const onSearchQueryChange = (event: Event) => {
     const query = (event.target as HTMLInputElement).value;
     const tags = getActiveNoteTagResults(query);
@@ -46,24 +55,26 @@ export const AutocompleteTagInput: FunctionalComponent<Props> = ({
     <form onSubmit={(event) => event.preventDefault()} className="mt-2">
       <Disclosure
         open={dropdownVisible}
-        onChange={() => setDropdownVisible(true)}
+        onChange={showDropdown}
       >
         <input
+          ref={inputRef}
           className="min-w-80 text-xs no-border h-7 focus:outline-none focus:shadow-none focus:border-bottom"
           value={searchQuery}
           onChange={onSearchQueryChange}
           type="text"
           onBlur={closeOnBlur}
           onFocus={() => {
             if (tagResults.length > 0) {
-              setDropdownVisible(true);
+              showDropdown();
             }
           }}
         />
         {dropdownVisible && (
           <DisclosurePanel
             ref={dropdownRef}
-            className="sn-dropdown flex flex-col py-2 max-h-120 overflow-y-scroll absolute"
+            className="sn-dropdown flex flex-col py-2 overflow-y-scroll absolute"
+            style={{ maxHeight: dropdownMaxHeight }}
           >
             {tagResults.map((tag) => {
               return (