From 2eac8f48d623d717c4e5331ef79fe1b8d9061dfd Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Wed, 16 May 2018 21:37:35 +0200
Subject: [PATCH] Workaround IOS focus bug when clicking on buttons

---
 .../client/components/rte/components/Button.js       | 11 ++---------
 .../client/components/rte/factories/createToggle.js  | 12 ++++++++++++
 2 files changed, 14 insertions(+), 9 deletions(-)

diff --git a/plugins/talk-plugin-rich-text/client/components/rte/components/Button.js b/plugins/talk-plugin-rich-text/client/components/rte/components/Button.js
index f99648cb7..fd5d451a1 100644
--- a/plugins/talk-plugin-rich-text/client/components/rte/components/Button.js
+++ b/plugins/talk-plugin-rich-text/client/components/rte/components/Button.js
@@ -7,21 +7,17 @@ class Button extends React.Component {
   render() {
     const {
       className,
-      title,
-      onClick,
       children,
       active,
       activeClassName,
-      disabled,
+      ...rest
     } = this.props;
     return (
       <button
         className={cn(className, styles.button, {
           [cn(styles.active, activeClassName)]: active,
         })}
-        title={title}
-        onClick={onClick}
-        disabled={disabled}
+        {...rest}
       >
         {children}
       </button>
@@ -32,11 +28,8 @@ class Button extends React.Component {
 Button.propTypes = {
   className: PropTypes.string,
   activeClassName: PropTypes.string,
-  title: PropTypes.string,
-  onClick: PropTypes.func,
   children: PropTypes.node,
   active: PropTypes.bool,
-  disabled: PropTypes.bool,
 };
 
 export default Button;
diff --git a/plugins/talk-plugin-rich-text/client/components/rte/factories/createToggle.js b/plugins/talk-plugin-rich-text/client/components/rte/factories/createToggle.js
index 028757222..59b75fdf2 100644
--- a/plugins/talk-plugin-rich-text/client/components/rte/factories/createToggle.js
+++ b/plugins/talk-plugin-rich-text/client/components/rte/factories/createToggle.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import Button from '../components/Button';
+import bowser from 'bowser';
 
 /**
  *  createToggle creates a button that can be active, inactive or disabled
@@ -32,7 +33,17 @@ const createToggle = (
       this.execCommand();
     };
 
+    // Detect whether there was focus on the RTE before the click.
+    hadFocusBeforeClick = false;
+    handleMouseDown = () => (this.hadFocusBeforeClick = this.props.api.focused);
+
     handleClick = () => {
+      // Skip IOS when the focus was not there before.
+      // IOS fails to focus to the RTE correctly and scrolls to nirvana.
+      // See https://www.pivotaltracker.com/story/show/157607216
+      if (!this.hadFocusBeforeClick && bowser.ios) {
+        return;
+      }
       this.props.api.focus();
       this.formatToggle();
       this.props.api.focus();
@@ -62,6 +73,7 @@ const createToggle = (
         <Button
           className={className}
           title={title}
+          onMouseDown={this.handleMouseDown}
           onClick={this.handleClick}
           active={this.state.active}
           disabled={disabled || this.state.disabled}