From 55c1c5e5828496b8465a7d4ada2680e44d5d191b Mon Sep 17 00:00:00 2001
From: Bruno Windels <brunow@matrix.org>
Date: Wed, 2 Oct 2019 14:31:42 +0200
Subject: [PATCH 1/2] tell tooltip when format bar gets hidden, as it won't be
 unmounted

---
 .../views/elements/InteractiveTooltip.js      |  4 ++-
 .../views/rooms/MessageComposerFormatBar.js   | 29 ++++++++++++-------
 2 files changed, 22 insertions(+), 11 deletions(-)

diff --git a/src/components/views/elements/InteractiveTooltip.js b/src/components/views/elements/InteractiveTooltip.js
index 41d66ae629..bcad8bc6bb 100644
--- a/src/components/views/elements/InteractiveTooltip.js
+++ b/src/components/views/elements/InteractiveTooltip.js
@@ -95,6 +95,8 @@ export default class InteractiveTooltip extends React.Component {
         content: PropTypes.node.isRequired,
         // Function to call when visibility of the tooltip changes
         onVisibilityChange: PropTypes.func,
+        // flag to forcefully hide this tooltip
+        forceHidden: PropTypes.bool,
     };
 
     constructor() {
@@ -269,8 +271,8 @@ export default class InteractiveTooltip extends React.Component {
 
     renderTooltip() {
         const { contentRect, visible } = this.state;
-        if (!visible) {
             ReactDOM.unmountComponentAtNode(getOrCreateContainer());
+        if (this.props.forceHidden === true || !visible) {
             return null;
         }
 
diff --git a/src/components/views/rooms/MessageComposerFormatBar.js b/src/components/views/rooms/MessageComposerFormatBar.js
index 8090fb2ad5..95c896c6fc 100644
--- a/src/components/views/rooms/MessageComposerFormatBar.js
+++ b/src/components/views/rooms/MessageComposerFormatBar.js
@@ -18,7 +18,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { _t } from '../../../languageHandler';
 import sdk from '../../../index';
-
+import classNames from 'classnames';
 
 export default class MessageComposerFormatBar extends React.PureComponent {
     static propTypes = {
@@ -26,18 +26,26 @@ export default class MessageComposerFormatBar extends React.PureComponent {
         shortcuts: PropTypes.object.isRequired,
     }
 
+    constructor(props) {
+        super(props);
+        this.state = {visible: false};
+    }
+
     render() {
-        return (<div className="mx_MessageComposerFormatBar" ref={ref => this._formatBarRef = ref}>
-            <FormatButton shortcut={this.props.shortcuts.bold} label={_t("Bold")} onClick={() => this.props.onAction("bold")} icon="Bold" />
-            <FormatButton shortcut={this.props.shortcuts.italics} label={_t("Italics")} onClick={() => this.props.onAction("italics")} icon="Italic" />
-            <FormatButton label={_t("Strikethrough")} onClick={() => this.props.onAction("strikethrough")} icon="Strikethrough" />
-            <FormatButton label={_t("Code block")} onClick={() => this.props.onAction("code")} icon="Code" />
-            <FormatButton shortcut={this.props.shortcuts.quote} label={_t("Quote")} onClick={() => this.props.onAction("quote")} icon="Quote" />
+        const classes = classNames("mx_MessageComposerFormatBar", {
+            "mx_MessageComposerFormatBar_shown": this.state.visible,
+        });
+        return (<div className={classes} ref={ref => this._formatBarRef = ref}>
+            <FormatButton label={_t("Bold")} onClick={() => this.props.onAction("bold")} icon="Bold" shortcut={this.props.shortcuts.bold} visible={this.state.visible} />
+            <FormatButton label={_t("Italics")} onClick={() => this.props.onAction("italics")} icon="Italic" shortcut={this.props.shortcuts.italics} visible={this.state.visible} />
+            <FormatButton label={_t("Strikethrough")} onClick={() => this.props.onAction("strikethrough")} icon="Strikethrough" visible={this.state.visible} />
+            <FormatButton label={_t("Code block")} onClick={() => this.props.onAction("code")} icon="Code" visible={this.state.visible} />
+            <FormatButton label={_t("Quote")} onClick={() => this.props.onAction("quote")} icon="Quote" shortcut={this.props.shortcuts.quote} visible={this.state.visible} />
         </div>);
     }
 
     showAt(selectionRect) {
-        this._formatBarRef.classList.add("mx_MessageComposerFormatBar_shown");
+        this.setState({visible: true});
         const parentRect = this._formatBarRef.parentElement.getBoundingClientRect();
         this._formatBarRef.style.left = `${selectionRect.left - parentRect.left}px`;
         // 12 is half the height of the bar (e.g. to center it) and 16 is an offset that felt ok.
@@ -45,7 +53,7 @@ export default class MessageComposerFormatBar extends React.PureComponent {
     }
 
     hide() {
-        this._formatBarRef.classList.remove("mx_MessageComposerFormatBar_shown");
+        this.setState({visible: false});
     }
 }
 
@@ -55,6 +63,7 @@ class FormatButton extends React.PureComponent {
         onClick: PropTypes.func.isRequired,
         icon: PropTypes.string.isRequired,
         shortcut: PropTypes.string,
+        visible: PropTypes.bool,
     }
 
     render() {
@@ -72,7 +81,7 @@ class FormatButton extends React.PureComponent {
         );
 
         return (
-            <InteractiveTooltip content={tooltipContent}>
+            <InteractiveTooltip content={tooltipContent} forceHidden={!this.props.visible}>
                 <span aria-label={this.props.label}
                    role="button"
                    onClick={this.props.onClick}

From 44e68f16bab94f62cc479bb23007b77773cb817e Mon Sep 17 00:00:00 2001
From: Bruno Windels <brunow@matrix.org>
Date: Wed, 2 Oct 2019 14:32:08 +0200
Subject: [PATCH 2/2] use a way of unmounting the tooltip that seems to work
 100% of the time
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

¯\_(ツ)_/¯
---
 src/components/views/elements/InteractiveTooltip.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/views/elements/InteractiveTooltip.js b/src/components/views/elements/InteractiveTooltip.js
index bcad8bc6bb..0bb356c5ba 100644
--- a/src/components/views/elements/InteractiveTooltip.js
+++ b/src/components/views/elements/InteractiveTooltip.js
@@ -271,8 +271,8 @@ export default class InteractiveTooltip extends React.Component {
 
     renderTooltip() {
         const { contentRect, visible } = this.state;
-            ReactDOM.unmountComponentAtNode(getOrCreateContainer());
         if (this.props.forceHidden === true || !visible) {
+            ReactDOM.render(null, getOrCreateContainer());
             return null;
         }