Do not include search input in the scroll container [Close #58]

css/emoji-mart.css

@@ -18,11 +18,16 @@
   padding: 6px;
 }
 
+.emoji-mart-bar {
+  border: 0 solid #d9d9d9;
+}
 .emoji-mart-bar:first-child {
+  border-bottom-width: 1px;
   border-top-left-radius: 5px;
   border-top-right-radius: 5px;
 }
 .emoji-mart-bar:last-child {
+  border-top-width: 1px;
   border-bottom-left-radius: 5px;
   border-bottom-right-radius: 5px;
 }
@@ -74,16 +79,17 @@
   overflow-y: scroll;
   height: 270px;
   padding: 0 6px 6px 6px;
-  border: solid #d9d9d9;
-  border-width: 1px 0;
 }
 
 .emoji-mart-search {
+  margin-top: 6px;
+  padding: 0 6px;
+}
+.emoji-mart-search input {
   font-size: 16px;
   display: block;
   width: 100%;
   padding: .2em .6em;
-  margin-top: 6px;
   border-radius: 25px;
   border: 1px solid #d9d9d9;
   outline: 0;

src/components/picker.js

@@ -243,6 +243,8 @@ export default class Picker extends React.Component {
     }
 
     this.forceUpdate()
+    this.refs.scroll.scrollTop = 0
+    this.handleScroll()
   }
 
   handleAnchorClick(category, i) {
@@ -308,17 +310,17 @@ export default class Picker extends React.Component {
         />
       </div>
 
-      <div ref="scroll" className='emoji-mart-scroll' onScroll={this.handleScroll.bind(this)}>
-        <Search
-          ref='search'
-          onSearch={this.handleSearch.bind(this)}
-          i18n={this.i18n}
-          emojisToShowFilter={emojisToShowFilter}
-          include={include}
-          exclude={exclude}
-          autoFocus={autoFocus}
-        />
+      <Search
+        ref='search'
+        onSearch={this.handleSearch.bind(this)}
+        i18n={this.i18n}
+        emojisToShowFilter={emojisToShowFilter}
+        include={include}
+        exclude={exclude}
+        autoFocus={autoFocus}
+      />
 
+      <div ref="scroll" className='emoji-mart-scroll' onScroll={this.handleScroll.bind(this)}>
         {this.getCategories().map((category, i) => {
           return <Category
             ref={`category-${i}`}

src/components/search.js

@@ -22,14 +22,15 @@ export default class Search extends React.Component {
   render() {
     var { i18n, autoFocus } = this.props
 
-    return <input
-      ref='input'
-      type='text'
-      onChange={this.handleChange.bind(this)}
-      placeholder={i18n.search}
-      className='emoji-mart-search'
-      autoFocus={autoFocus}
-    />
+    return <div className='emoji-mart-search'>
+      <input
+        ref='input'
+        type='text'
+        onChange={this.handleChange.bind(this)}
+        placeholder={i18n.search}
+        autoFocus={autoFocus}
+      />
+    </div>
   }
 }