From 4b9ce0c95d19b4786736c7595ef73404c2788e32 Mon Sep 17 00:00:00 2001
From: atomiks <cc.glows@gmail.com>
Date: Sat, 23 Feb 2019 11:54:32 +1100
Subject: [PATCH 1/4] Fix className prop

---
 .eslintrc          |  4 ++--
 demo/index.js      | 22 ++++++++++++++++------
 src/Tippy.js       | 25 ++++++++-----------------
 src/utils.js       | 14 +++++++++-----
 test/Tippy.test.js | 17 +++++++++++++++++
 5 files changed, 52 insertions(+), 30 deletions(-)

diff --git a/.eslintrc b/.eslintrc
index 158f293..dd54aa6 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -19,7 +19,7 @@
   },
   "extends": ["eslint:recommended", "plugin:react/recommended", "prettier"],
   "rules": {
-    "react/no-find-dom-node": "off",
-    "react/prop-types": "off"
+    "react/prop-types": "off",
+    "no-unused-vars": ["error", { "ignoreRestSiblings": true }]
   }
 }
diff --git a/demo/index.js b/demo/index.js
index f8dbb3c..6a58cb5 100644
--- a/demo/index.js
+++ b/demo/index.js
@@ -117,21 +117,27 @@ class ComponentChild extends React.Component {
 class App extends React.Component {
   state = {
     arrow: false,
-    customClass: ''
+    customClass: 'hello',
   }
 
   toggleArrow = () => {
     this.setState(state => ({
-      arrow: !state.arrow
+      arrow: !state.arrow,
     }))
   }
 
-  updateCustomClass = (e) => {
+  updateCustomClass = e => {
     this.setState({
-      customClass: e.target.value
+      customClass: e.target.value,
     })
   }
 
+  componentDidMount() {
+    setTimeout(() => {
+      this.setState({ customClass: 'bye' })
+    }, 500)
+  }
+
   render() {
     return (
       <main className="container">
@@ -174,8 +180,12 @@ class App extends React.Component {
         </Tippy>
 
         <h1>Other</h1>
-        <input type="text" placeholder="Enter class" onChange={this.updateCustomClass}/>
-        <Tippy placement="bottom" className={this.state.customClass}>
+        <input
+          type="text"
+          placeholder="Enter class"
+          onChange={this.updateCustomClass}
+        />
+        <Tippy trigger="click" className={this.state.customClass}>
           <button>Custom class</button>
         </Tippy>
       </main>
diff --git a/src/Tippy.js b/src/Tippy.js
index 41c88f2..e380138 100644
--- a/src/Tippy.js
+++ b/src/Tippy.js
@@ -3,7 +3,6 @@ import React, {
   cloneElement,
   useState,
   useRef,
-  useEffect,
   useLayoutEffect,
 } from 'react'
 import { createPortal } from 'react-dom'
@@ -32,20 +31,15 @@ function Tippy(props) {
     options.trigger = 'manual'
   }
 
-  useEffect(() => {
+  useLayoutEffect(() => {
     instanceRef.current = tippy(targetRef.current, options)
 
-    const { onCreate, isEnabled, isVisible, className } = props
+    const { onCreate, isEnabled, isVisible } = props
 
     if (onCreate) {
       onCreate(instanceRef.current)
     }
 
-    if (className) {
-      const { tooltip } = instanceRef.current.popperChildren
-      updateClassName(tooltip, 'add', props.className)
-    }
-
     if (isEnabled === false) {
       instanceRef.current.disable()
     }
@@ -86,15 +80,12 @@ function Tippy(props) {
   })
 
   useLayoutEffect(() => {
-    if (!isMounted) {
-      return
-    }
-
-    const { tooltip } = instanceRef.current.popperChildren
-    updateClassName(tooltip, 'add', props.className)
-
-    return () => {
-      updateClassName(tooltip, 'remove', props.className)
+    if (props.className) {
+      const { tooltip } = instanceRef.current.popperChildren
+      updateClassName(tooltip, 'add', props.className)
+      return () => {
+        updateClassName(tooltip, 'remove', props.className)
+      }
     }
   }, [props.className])
 
diff --git a/src/utils.js b/src/utils.js
index 22d8818..e1b236c 100644
--- a/src/utils.js
+++ b/src/utils.js
@@ -1,6 +1,12 @@
 export function getNativeTippyProps(props) {
-  // eslint-disable-next-line no-unused-vars
-  const { children, onCreate, isVisible, isEnabled, className, ...nativeProps } = props
+  const {
+    children,
+    onCreate,
+    isVisible,
+    isEnabled,
+    className,
+    ...nativeProps
+  } = props
   return nativeProps
 }
 
@@ -25,8 +31,6 @@ export function ssrSafeCreateDiv() {
 
 export function updateClassName(tooltip, action, classNames) {
   classNames.split(/\s+/).forEach(name => {
-    if (name) {
-      tooltip.classList[action](name)
-    }
+    tooltip.classList[action](name)
   })
 }
diff --git a/test/Tippy.test.js b/test/Tippy.test.js
index e95d784..0084e31 100644
--- a/test/Tippy.test.js
+++ b/test/Tippy.test.js
@@ -75,6 +75,23 @@ describe('<Tippy />', () => {
     expect(tip.popper.querySelector('.world')).not.toBeNull()
   })
 
+  test('updating className does not leave stale className behind', () => {
+    const { container, rerender } = render(
+      <Tippy content="tooltip" className="one">
+        <button />
+      </Tippy>,
+    )
+    const { tooltip } = container.querySelector('button')._tippy.popperChildren
+    expect(tooltip.classList.contains('one')).toBe(true)
+    rerender(
+      <Tippy content="tooltip" className="two">
+        <button />
+      </Tippy>,
+    )
+    expect(tooltip.classList.contains('one')).toBe(false)
+    expect(tooltip.classList.contains('two')).toBe(true)
+  })
+
   test('unmount destroys the tippy instance and allows garbage collection', () => {
     const { container, unmount } = render(
       <Tippy content="tooltip">

From 5527d7d156f28817583a0f16f01fe62ca8542fc2 Mon Sep 17 00:00:00 2001
From: atomiks <cc.glows@gmail.com>
Date: Sat, 23 Feb 2019 11:56:58 +1100
Subject: [PATCH 2/4] Remove unused demo code

---
 demo/index.js | 11 -----------
 1 file changed, 11 deletions(-)

diff --git a/demo/index.js b/demo/index.js
index 6a58cb5..6d44689 100644
--- a/demo/index.js
+++ b/demo/index.js
@@ -126,12 +126,6 @@ class App extends React.Component {
     }))
   }
 
-  updateCustomClass = e => {
-    this.setState({
-      customClass: e.target.value,
-    })
-  }
-
   componentDidMount() {
     setTimeout(() => {
       this.setState({ customClass: 'bye' })
@@ -180,11 +174,6 @@ class App extends React.Component {
         </Tippy>
 
         <h1>Other</h1>
-        <input
-          type="text"
-          placeholder="Enter class"
-          onChange={this.updateCustomClass}
-        />
         <Tippy trigger="click" className={this.state.customClass}>
           <button>Custom class</button>
         </Tippy>

From 6b70c38babe14f4535ae970093763a567749478d Mon Sep 17 00:00:00 2001
From: atomiks <cc.glows@gmail.com>
Date: Sat, 23 Feb 2019 13:15:22 +1100
Subject: [PATCH 3/4] Consistency

---
 test/Tippy.test.js | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/test/Tippy.test.js b/test/Tippy.test.js
index 0084e31..bd9a46f 100644
--- a/test/Tippy.test.js
+++ b/test/Tippy.test.js
@@ -55,24 +55,24 @@ describe('<Tippy />', () => {
   test('custom class name get added to DOM', () => {
     const className = 'hello'
     const { container } = render(
-      <Tippy content="tip content" className={className}>
+      <Tippy content="tooltip" className={className}>
         <button />
       </Tippy>,
     )
-    const tip = container.querySelector('button')._tippy
-    expect(tip.popper.querySelector(`.${className}`)).not.toBeNull()
+    const instance = container.querySelector('button')._tippy
+    expect(instance.popper.querySelector(`.${className}`)).not.toBeNull()
   })
 
   test('custom class name get added to DOM', () => {
     const classNames = 'hello world'
     const { container } = render(
-      <Tippy content="tip content" className={classNames}>
+      <Tippy content="tooltip" className={classNames}>
         <button />
       </Tippy>,
     )
-    const tip = container.querySelector('button')._tippy
-    expect(tip.popper.querySelector('.hello')).not.toBeNull()
-    expect(tip.popper.querySelector('.world')).not.toBeNull()
+    const instance = container.querySelector('button')._tippy
+    expect(instance.popper.querySelector('.hello')).not.toBeNull()
+    expect(instance.popper.querySelector('.world')).not.toBeNull()
   })
 
   test('updating className does not leave stale className behind', () => {

From 1e9b063703f7c389d843252281e0f8542c1bc0d7 Mon Sep 17 00:00:00 2001
From: atomiks <cc.glows@gmail.com>
Date: Sat, 23 Feb 2019 13:19:33 +1100
Subject: [PATCH 4/4] Add whitespace check and test

---
 src/utils.js       |  4 +++-
 test/Tippy.test.js | 17 ++++++++++++++---
 2 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/src/utils.js b/src/utils.js
index e1b236c..4e7037b 100644
--- a/src/utils.js
+++ b/src/utils.js
@@ -31,6 +31,8 @@ export function ssrSafeCreateDiv() {
 
 export function updateClassName(tooltip, action, classNames) {
   classNames.split(/\s+/).forEach(name => {
-    tooltip.classList[action](name)
+    if (name) {
+      tooltip.classList[action](name)
+    }
   })
 }
diff --git a/test/Tippy.test.js b/test/Tippy.test.js
index bd9a46f..e63ff82 100644
--- a/test/Tippy.test.js
+++ b/test/Tippy.test.js
@@ -52,7 +52,7 @@ describe('<Tippy />', () => {
     expect(instance.popper.querySelector('strong')).not.toBeNull()
   })
 
-  test('custom class name get added to DOM', () => {
+  test('props.className: single name is added to tooltip', () => {
     const className = 'hello'
     const { container } = render(
       <Tippy content="tooltip" className={className}>
@@ -63,7 +63,7 @@ describe('<Tippy />', () => {
     expect(instance.popper.querySelector(`.${className}`)).not.toBeNull()
   })
 
-  test('custom class name get added to DOM', () => {
+  test('props.className: multiple names are added to tooltip', () => {
     const classNames = 'hello world'
     const { container } = render(
       <Tippy content="tooltip" className={classNames}>
@@ -75,7 +75,18 @@ describe('<Tippy />', () => {
     expect(instance.popper.querySelector('.world')).not.toBeNull()
   })
 
-  test('updating className does not leave stale className behind', () => {
+  test('props.className: extra whitespace is ignored', () => {
+    const className = ' hello world  '
+    const { container } = render(
+      <Tippy content="tooltip" className={className}>
+        <button />
+      </Tippy>,
+    )
+    const { tooltip } = container.querySelector('button')._tippy.popperChildren
+    expect(tooltip.className).toBe('tippy-tooltip dark-theme hello world')
+  })
+
+  test('props.className: updating does not leave stale className behind', () => {
     const { container, rerender } = render(
       <Tippy content="tooltip" className="one">
         <button />