Просмотр исходного кода

batch DOM reads from query field typeahead

David Kaltschmidt 7 лет назад
Родитель
Сommit
b2f497b100
1 измененных файлов с 10 добавлено и 3 удалено
  1. 10 3
      public/app/containers/Explore/QueryField.tsx

+ 10 - 3
public/app/containers/Explore/QueryField.tsx

@@ -522,10 +522,17 @@ class QueryField extends React.Component<any, any> {
 
     // Align menu overlay to editor node
     if (node) {
+      // Read from DOM
       const rect = node.parentElement.getBoundingClientRect();
-      menu.style.opacity = 1;
-      menu.style.top = `${rect.top + window.scrollY + rect.height + 4}px`;
-      menu.style.left = `${rect.left + window.scrollX - 2}px`;
+      const scrollX = window.scrollX;
+      const scrollY = window.scrollY;
+
+      // Write DOM
+      requestAnimationFrame(() => {
+        menu.style.opacity = 1;
+        menu.style.top = `${rect.top + scrollY + rect.height + 4}px`;
+        menu.style.left = `${rect.left + scrollX - 2}px`;
+      });
     }
   };