Merge pull request #54 from vinnymac/features/autofocus

add prop to autofocus search input

README.md

@@ -20,6 +20,7 @@ import { Picker } from 'emoji-mart'
 
 | Prop | Required | Default | Description |
 | ---- | :------: | ------- | ----------- |
+| **autoFocus** | | `false` | Auto focus the search input when mounted |
 | **color** | | `#ae65c5` | The top bar anchors select and hover color |
 | **emoji** | | `department_store` | The emoji shown when no emojis are hovered |
 | **include** | | `['People', 'Flags']` | Only load included categories |

src/components/picker.js

@@ -265,7 +265,7 @@ export default class Picker extends React.Component {
   }
 
   render() {
-    var { perLine, emojiSize, set, sheetSize, style, title, emoji, color, native, backgroundImageFn, emojisToShowFilter } = this.props,
+    var { perLine, emojiSize, set, sheetSize, style, title, emoji, color, native, backgroundImageFn, emojisToShowFilter, autoFocus } = this.props,
         { skin } = this.state,
         width = (perLine * (emojiSize + 12)) + 12 + 2
 
@@ -286,6 +286,7 @@ export default class Picker extends React.Component {
           onSearch={this.handleSearch.bind(this)}
           i18n={this.i18n}
           emojisToShowFilter={emojisToShowFilter}
+          autoFocus={autoFocus}
         />
 
         {this.getCategories().map((category, i) => {
@@ -353,7 +354,8 @@ Picker.propTypes = {
   sheetSize: Emoji.propTypes.sheetSize,
   emojisToShowFilter: React.PropTypes.func,
   include: React.PropTypes.arrayOf(React.PropTypes.string),
-  exclude: React.PropTypes.arrayOf(React.PropTypes.string)
+  exclude: React.PropTypes.arrayOf(React.PropTypes.string),
+  autoFocus: React.PropTypes.bool,
 }
 
 Picker.defaultProps = {
@@ -371,4 +373,5 @@ Picker.defaultProps = {
   sheetSize: Emoji.defaultProps.sheetSize,
   backgroundImageFn: Emoji.defaultProps.backgroundImageFn,
   emojisToShowFilter: (codePoint) => true,
+  autoFocus: false,
 }

src/components/search.js

@@ -14,7 +14,7 @@ export default class Search extends React.Component {
   }
 
   render() {
-    var { i18n } = this.props
+    var { i18n, autoFocus } = this.props
 
     return <input
       ref='input'
@@ -22,6 +22,7 @@ export default class Search extends React.Component {
       onChange={this.handleChange.bind(this)}
       placeholder={i18n.search}
       className='emoji-mart-search'
+      autoFocus={autoFocus}
     />
   }
 }
@@ -29,11 +30,13 @@ export default class Search extends React.Component {
 Search.propTypes = {
   onSearch: React.PropTypes.func,
   maxResults: React.PropTypes.number,
-  emojisToShowFilter: React.PropTypes.func
+  emojisToShowFilter: React.PropTypes.func,
+  autoFocus: React.PropTypes.bool,
 }
 
 Search.defaultProps = {
   onSearch: (() => {}),
   maxResults: 75,
-  emojisToShowFilter: () => true
+  emojisToShowFilter: () => true,
+  autoFocus: false,
 }