diff --git a/README.md b/README.md
index 9e6aae3f5..321d36004 100644
--- a/README.md
+++ b/README.md
@@ -17,7 +17,7 @@ import 'emoji-mart/css/emoji-mart.css'
import { Picker } from 'emoji-mart'
-
+
@@ -33,7 +33,8 @@ import { Picker } from 'emoji-mart'
| **custom** | | `[]` | [Custom emojis](#custom-emojis) |
| **recent** | | | Pass your own frequently used emojis as array of string IDs |
| **emojiSize** | | `24` | The emoji width and height |
-| **onClick** | | | Params: `(emoji, event) => {}` |
+| **onClick** | | | Params: `(emoji, event) => {}`. Not called when emoji is selected with `enter` |
+| **onSelect** | | | Params: `(emoji) => {}` |
| **onSkinChange** | | | Params: `(skin) => {}` |
| **perLine** | | `9` | Number of emojis per line. While there’s no minimum or maximum, this will affect the picker’s width. This will set *Frequently Used* length as well (`perLine * 4`) |
| **i18n** | | [`{…}`](#i18n) | [An object](#i18n) containing localized strings |
diff --git a/docs/index.js b/docs/index.js
index c4a271897..592a16d0b 100644
--- a/docs/index.js
+++ b/docs/index.js
@@ -69,7 +69,7 @@ class Example extends React.Component {
diff --git a/src/components/picker.js b/src/components/picker.js
index 16ac1a8eb..6cb1ca33d 100644
--- a/src/components/picker.js
+++ b/src/components/picker.js
@@ -147,8 +147,10 @@ export default class Picker extends React.PureComponent {
this.handleEmojiOver = this.handleEmojiOver.bind(this)
this.handleEmojiLeave = this.handleEmojiLeave.bind(this)
this.handleEmojiClick = this.handleEmojiClick.bind(this)
+ this.handleEmojiSelect = this.handleEmojiSelect.bind(this)
this.setPreviewRef = this.setPreviewRef.bind(this)
this.handleSkinChange = this.handleSkinChange.bind(this)
+ this.handleKeyDown = this.handleKeyDown.bind(this)
}
componentWillReceiveProps(props) {
@@ -225,6 +227,11 @@ export default class Picker extends React.PureComponent {
handleEmojiClick(emoji, e) {
this.props.onClick(emoji, e)
+ this.handleEmojiSelect(emoji)
+ }
+
+ handleEmojiSelect(emoji) {
+ this.props.onSelect(emoji)
if (!this.hideRecent && !this.props.recent) frequently.add(emoji)
var component = this.categoryRefs['category-1']
@@ -368,6 +375,21 @@ export default class Picker extends React.PureComponent {
onSkinChange(skin)
}
+ handleKeyDown(e) {
+ let handled = false
+ switch (e.keyCode) {
+ case 13:
+ handled = true
+ if (SEARCH_CATEGORY.emojis) {
+ this.handleEmojiSelect(SEARCH_CATEGORY.emojis[0])
+ }
+ break;
+ }
+ if (handled) {
+ e.preventDefault()
+ }
+ }
+
updateCategoriesSize() {
for (let i = 0, l = this.categories.length; i < l; i++) {
let component = this.categoryRefs[`category-${i}`]
@@ -436,7 +458,7 @@ export default class Picker extends React.PureComponent {
width = perLine * (emojiSize + 12) + 12 + 2 + measureScrollbar()
return (
-
+
{},
+ onSelect: () => {},
onSkinChange: () => {},
emojiSize: 24,
perLine: 9,
diff --git a/stories/index.js b/stories/index.js
index 2561a6be7..b0798ec14 100644
--- a/stories/index.js
+++ b/stories/index.js
@@ -28,6 +28,7 @@ storiesOf('Picker', module)
.add('default', () => (