From 9b4c22d3bf24846ed28dc4aa2d6238fc249370da Mon Sep 17 00:00:00 2001
From: Tasso Evangelista <tasso.evangelista@rocket.chat>
Date: Tue, 12 Jun 2018 19:00:06 -0300
Subject: [PATCH 1/4] Fix popover to precompute target position

---
 packages/rocketchat-ui/client/views/app/popover.js | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/packages/rocketchat-ui/client/views/app/popover.js b/packages/rocketchat-ui/client/views/app/popover.js
index 30e2897c626ce..4512444068c14 100644
--- a/packages/rocketchat-ui/client/views/app/popover.js
+++ b/packages/rocketchat-ui/client/views/app/popover.js
@@ -5,8 +5,12 @@ import { hide, leave } from 'meteor/rocketchat:lib';
 
 this.popover = {
 	renderedPopover: null,
-	open(config) {
-		this.renderedPopover = Blaze.renderWithData(Template.popover, config, document.body);
+	open({ currentTarget, ...config }) {
+		const data = {
+			targetRect: currentTarget && currentTarget.getBoundingClientRect && currentTarget.getBoundingClientRect(),
+			...config
+		};
+		this.renderedPopover = Blaze.renderWithData(Template.popover, data, document.body);
 	},
 	close() {
 		if (!this.renderedPopover) {
@@ -52,8 +56,8 @@ Template.popover.onRendered(function() {
 		const customCSSProperties = typeof this.data.customCSSProperties === 'function' ? this.data.customCSSProperties() : this.data.customCSSProperties;
 
 		const mousePosition = typeof this.data.mousePosition === 'function' ? this.data.mousePosition() : this.data.mousePosition || {
-			x: this.data.currentTarget.getBoundingClientRect()[horizontalDirection === 'left'? 'right' : 'left'],
-			y: this.data.currentTarget.getBoundingClientRect()[verticalDirection]
+			x: this.data.targetRect[horizontalDirection === 'left'? 'right' : 'left'],
+			y: this.data.targetRect[verticalDirection]
 		};
 		const offsetWidth = offsetHorizontal * (horizontalDirection === 'left' ? 1 : -1);
 		const offsetHeight = offsetVertical * (verticalDirection === 'bottom' ? 1 : -1);
@@ -62,7 +66,7 @@ Template.popover.onRendered(function() {
 			popoverContent.style.top = `${ position.top }px`;
 			popoverContent.style.left = `${ position.left }px`;
 		} else {
-			const clientHeight = this.data.currentTarget.clientHeight;
+			const clientHeight = this.data.targetRect.height;
 			const popoverWidth = popoverContent.offsetWidth;
 			const popoverHeight = popoverContent.offsetHeight;
 			const windowWidth = window.innerWidth;

From 14bd682f4532533a21a7c6d61285b0302f8434c7 Mon Sep 17 00:00:00 2001
From: Tasso Evangelista <tasso@tassoevan.me>
Date: Wed, 13 Jun 2018 00:47:45 -0300
Subject: [PATCH 2/4] Add comment for clarity

---
 packages/rocketchat-ui/client/views/app/popover.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/rocketchat-ui/client/views/app/popover.js b/packages/rocketchat-ui/client/views/app/popover.js
index 4512444068c14..cf5035ea9dbc2 100644
--- a/packages/rocketchat-ui/client/views/app/popover.js
+++ b/packages/rocketchat-ui/client/views/app/popover.js
@@ -6,6 +6,7 @@ import { hide, leave } from 'meteor/rocketchat:lib';
 this.popover = {
 	renderedPopover: null,
 	open({ currentTarget, ...config }) {
+		// Popover position must be computed as soon as possible, avoiding DOM changes over currentTarget
 		const data = {
 			targetRect: currentTarget && currentTarget.getBoundingClientRect && currentTarget.getBoundingClientRect(),
 			...config

From 303e69b5531c159192cd290067817e0cf9c408e2 Mon Sep 17 00:00:00 2001
From: Tasso Evangelista <tasso@tassoevan.me>
Date: Wed, 13 Jun 2018 01:08:00 -0300
Subject: [PATCH 3/4] Show popover only after rendered into DOM tree

---
 packages/rocketchat-ui/client/views/app/popover.html | 2 +-
 packages/rocketchat-ui/client/views/app/popover.js   | 2 ++
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/rocketchat-ui/client/views/app/popover.html b/packages/rocketchat-ui/client/views/app/popover.html
index 9552e4ff21571..8f4fce718cbce 100644
--- a/packages/rocketchat-ui/client/views/app/popover.html
+++ b/packages/rocketchat-ui/client/views/app/popover.html
@@ -1,5 +1,5 @@
 <template name="popover">
-	<div class="rc-popover rc-popover--{{popoverClass}}" data-popover="popover" style="display:block;">
+	<div class="rc-popover rc-popover--{{popoverClass}}" data-popover="popover" style="display: none;">
 		<div class="rc-popover__content {{#if isSafariIos}}rc-popover__content--safariIos{{/if}}">
 			{{#if template}}
 				{{> Template.dynamic template=template data=data}}
diff --git a/packages/rocketchat-ui/client/views/app/popover.js b/packages/rocketchat-ui/client/views/app/popover.js
index cf5035ea9dbc2..505e9d78d2f3c 100644
--- a/packages/rocketchat-ui/client/views/app/popover.js
+++ b/packages/rocketchat-ui/client/views/app/popover.js
@@ -127,6 +127,8 @@ Template.popover.onRendered(function() {
 	$(window).on('resize', position);
 	position();
 	this.position = position;
+
+	this.firstNode.style.display = 'block';
 });
 
 Template.popover.onDestroyed(function() {

From 76c2c4c0412eddd7062f71a9ecfe3983d0b4e4b7 Mon Sep 17 00:00:00 2001
From: Tasso Evangelista <tasso.evangelista@rocket.chat>
Date: Wed, 13 Jun 2018 13:16:23 -0300
Subject: [PATCH 4/4] Fix popover size computation by hiding it using CSS
 visibility

---
 packages/rocketchat-ui/client/views/app/popover.html | 2 +-
 packages/rocketchat-ui/client/views/app/popover.js   | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/rocketchat-ui/client/views/app/popover.html b/packages/rocketchat-ui/client/views/app/popover.html
index 8f4fce718cbce..9ebb7a82c547d 100644
--- a/packages/rocketchat-ui/client/views/app/popover.html
+++ b/packages/rocketchat-ui/client/views/app/popover.html
@@ -1,5 +1,5 @@
 <template name="popover">
-	<div class="rc-popover rc-popover--{{popoverClass}}" data-popover="popover" style="display: none;">
+	<div class="rc-popover rc-popover--{{popoverClass}}" data-popover="popover" style="display: block; visibility: hidden;">
 		<div class="rc-popover__content {{#if isSafariIos}}rc-popover__content--safariIos{{/if}}">
 			{{#if template}}
 				{{> Template.dynamic template=template data=data}}
diff --git a/packages/rocketchat-ui/client/views/app/popover.js b/packages/rocketchat-ui/client/views/app/popover.js
index 505e9d78d2f3c..18693d0db61ef 100644
--- a/packages/rocketchat-ui/client/views/app/popover.js
+++ b/packages/rocketchat-ui/client/views/app/popover.js
@@ -128,7 +128,7 @@ Template.popover.onRendered(function() {
 	position();
 	this.position = position;
 
-	this.firstNode.style.display = 'block';
+	this.firstNode.style.visibility = 'visible';
 });
 
 Template.popover.onDestroyed(function() {