From 4325a3c249d7b7466ee708884f64039423ffdb4d Mon Sep 17 00:00:00 2001
From: Pavel Mineev <pavel@mineev.me>
Date: Fri, 12 Mar 2021 00:44:37 +0300
Subject: [PATCH] Fix dropdown opening

* change iframe height on content change
* change iframe size on dropdown open
---
 frontend/app/components/auth/auth.hooks.ts | 31 +++++++++++-----------
 1 file changed, 16 insertions(+), 15 deletions(-)

diff --git a/frontend/app/components/auth/auth.hooks.ts b/frontend/app/components/auth/auth.hooks.ts
index 9cdfed49..3e9d389e 100644
--- a/frontend/app/components/auth/auth.hooks.ts
+++ b/frontend/app/components/auth/auth.hooks.ts
@@ -1,5 +1,16 @@
 import { useEffect, useRef, useState } from 'preact/hooks';
 
+function handleChangeIframeSize(element: HTMLElement) {
+  const { top } = element.getBoundingClientRect();
+  const height = window.scrollY + Math.abs(top) + element.scrollHeight + 20;
+
+  if (window.innerHeight > height) {
+    return;
+  }
+
+  document.body.style.setProperty('min-height', `${height}px`);
+}
+
 export function useDropdown(disableClosing?: boolean) {
   const rootRef = useRef<HTMLDivElement>(null);
   const [showDropdown, setShowDropdown] = useState(false);
@@ -14,6 +25,8 @@ export function useDropdown(disableClosing?: boolean) {
 
     const dropdownElement = rootRef.current;
 
+    handleChangeIframeSize(dropdownElement);
+
     function handleMessageFromParent(evt: MessageEvent) {
       if (typeof evt.data !== 'string' || disableClosing) {
         return;
@@ -54,21 +67,9 @@ export function useDropdown(disableClosing?: boolean) {
       return;
     }
 
-    let prevHeight: number | null = null;
-
-    function handleDropdownContentChange() {
-      const { top } = dropdownElement.getBoundingClientRect();
-      const height = window.scrollY + Math.abs(top) + dropdownElement.scrollHeight + 20;
-
-      if (prevHeight === null && window.innerHeight > height) {
-        return;
-      }
-
-      prevHeight = height;
-      document.body.style.setProperty('min-height', `${height}px`);
-    }
-
-    const observer = new MutationObserver(handleDropdownContentChange);
+    const observer = new MutationObserver(() => {
+      handleChangeIframeSize(dropdownElement);
+    });
 
     observer.observe(dropdownElement, { attributes: true, childList: true, subtree: true });