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,7 +310,6 @@ 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)}
@@ -319,6 +320,7 @@ export default class Picker extends React.Component {
         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
+    return <div className='emoji-mart-search'>
+      <input
         ref='input'
         type='text'
         onChange={this.handleChange.bind(this)}
         placeholder={i18n.search}
-      className='emoji-mart-search'
         autoFocus={autoFocus}
       />
+    </div>
   }
 }