From 1a3f2525b91e4218faafaad976fb3c00a7678198 Mon Sep 17 00:00:00 2001
From: Etienne Lemay <etienne@heliom.ca>
Date: Fri, 8 Jul 2016 16:28:43 -0400
Subject: [PATCH] Clear search results when clicking a category anchor

---
 src/components/category.js |  4 +++-
 src/components/picker.js   | 29 +++++++++++++++++++++--------
 src/components/search.js   |  4 ++++
 3 files changed, 28 insertions(+), 9 deletions(-)

diff --git a/src/components/category.js b/src/components/category.js
index ca005ca..ba8fae4 100644
--- a/src/components/category.js
+++ b/src/components/category.js
@@ -56,7 +56,9 @@ export default class Category extends React.Component {
     var { height: labelHeight } = this.label.getBoundingClientRect()
 
     this.top = top - parentTop + this.parent.scrollTop
-    if (height > labelHeight) {
+    if (height == 0) {
+      this.maxMargin = 0
+    } else if (height > labelHeight) {
       this.maxMargin = height - labelHeight
     } else {
       this.maxMargin = 1
diff --git a/src/components/picker.js b/src/components/picker.js
index c5de22c..e8c2f1f 100644
--- a/src/components/picker.js
+++ b/src/components/picker.js
@@ -137,18 +137,30 @@ export default class Picker extends React.Component {
 
   handleAnchorClick(category, i) {
     var component = this.refs[`category-${i}`],
-        { scroll, anchors } = this.refs
+        { scroll, anchors } = this.refs,
+        scrollToComponent = null
 
-    if (component) {
-      let { top } = component
+    scrollToComponent = () => {
+      if (component) {
+        let { top } = component
 
-      if (category.name == 'Recent') {
-        top = 0
-      } else {
-        top += 1
+        if (category.name == 'Recent') {
+          top = 0
+        } else {
+          top += 1
+        }
+
+        scroll.scrollTop = top
       }
+    }
 
-      scroll.scrollTop = top
+    if (SEARCH_CATEGORY.emojis) {
+      this.handleSearch(null)
+      this.refs.search.clear()
+
+      window.requestAnimationFrame(scrollToComponent)
+    } else {
+      scrollToComponent()
     }
   }
 
@@ -182,6 +194,7 @@ export default class Picker extends React.Component {
 
       <div ref="scroll" className='emoji-picker-scroll' onScroll={this.handleScroll.bind(this)}>
         <Search
+          ref='search'
           onSearch={this.handleSearch.bind(this)}
         />
 
diff --git a/src/components/search.js b/src/components/search.js
index 3a07081..bf12818 100644
--- a/src/components/search.js
+++ b/src/components/search.js
@@ -59,6 +59,10 @@ export default class Search extends React.Component {
     this.props.onSearch(results)
   }
 
+  clear() {
+    this.refs.input.value = ''
+  }
+
   render() {
     return <input
       ref='input'