Simpler implementation.

Show the external `selectedEmoji` in the picker, rely on external
code to unset it when `unselect` event is sent.

README.md

@@ -194,7 +194,7 @@ Note: CSS also includes background images for image-based emoji sets (apple, goo
 | **pickerStyles**   |          |                    | Inline styles applied to the root element. Useful for positioning                                    |
 | **title**          |          | `Emoji Mart™`      | The title shown when no emojis are hovered                                                           |
 | **infiniteScroll** |          | `true`             | Scroll continuously through the categories                                                           |
-| **selectable**     |          | `false`            | Display "Selected" category with emoji passed as 'emoji', see "Selectable picker" section            |
+| **selectedEmoji**  |          | `undefined`        | Display "Selected" category with emoji passed as 'selectedEmoji'                                     |
 
 | Event           | Description             |
 | --------------- | ----------------------- |
@@ -213,8 +213,7 @@ Here is an example:
   <emoji v-if="selectedEmoji" :data="index" :emoji="selectedEmoji" :size="32" />
   <picker
     :data="index"
-    :emoji="selectedEmoji"
-    :selectable="true"
+    :selectedEmoji="selectedEmoji"
     @select="selectableSelectEmoji"
     @unselect="selectableUnselectEmoji"
   />

docs/app.vue

@@ -70,6 +70,7 @@
     <div class="row"></div>
     <h2>Selectable Example</h2>
     <div class="row">
+      <button @click="toggleSelectable">Show / hide the picker</button>
       <emoji
         v-if="selectedEmoji"
         :data="index"
@@ -80,13 +81,10 @@
     </div>
     <div class="row">
       <picker
+        v-if="selectableVisible"
         :data="index"
-        :set="activeSet"
-        :native="native"
         :selectable="true"
-        :emojiTooltip="true"
-        :title="title"
-        :emojiSize="30"
+        :selectedEmoji="selectedEmoji"
         @select="selectableSelectEmoji"
         @unselect="selectableUnselectEmoji"
       />
@@ -296,6 +294,7 @@ export default {
       selectedEmojis: [],
       flagsVisible: true,
       selectedEmoji: undefined,
+      selectableVisible: false,
     }
   },
   computed: {
@@ -338,6 +337,9 @@ export default {
     selectableUnselectEmoji(emoji) {
       this.selectedEmoji = undefined
     },
+    toggleSelectable() {
+      this.selectableVisible = !this.selectableVisible
+    },
   },
   components: {
     Picker,

spec/picker-spec.js

@@ -402,17 +402,15 @@ describe('emjoiSize', () => {
 
 describe('selectable emjoi', () => {
   let index = new EmojiIndex(data)
+  // The selected emoji is passed ouside the component.
   const picker = mount(Picker, {
     propsData: {
       data: index,
-      selectable: true,
+      selectedEmoji: index.emoji('grinning'),
     },
   })
 
   it('selectable emoji is displayed', async () => {
-    let emoji = picker.find('[data-title="grinning"]')
-    await emoji.trigger('click')
-
     let selectedEmoji = picker.findComponent(SelectedEmoji)
 
     expect(selectedEmoji.exists()).toBe(true)
@@ -423,39 +421,31 @@ describe('selectable emjoi', () => {
   })
 
   it('selectable emoji removed when clicked', async () => {
-    let emoji = picker.find('[data-title="heart_eyes"]')
-    await emoji.trigger('click')
-
     let selectedEmoji = picker.findComponent(SelectedEmoji)
     await selectedEmoji.find('.emoji-selected').trigger('click')
 
     // Selected emoji emitted the 'click' event
     let events = selectedEmoji.emitted().click
     expect(events.length).toBe(1)
     let emojiData = events[0][0]
-    expect(emojiData).toBe(index.emoji('heart_eyes'))
+    expect(emojiData.id).toBe('grinning')
 
-    // Selected emoji is not displayed (Picker removed it)
-    let selectedEmojiAfter = picker.findComponent(SelectedEmoji)
-    expect(selectedEmojiAfter.exists()).toBe(false)
+    // Vefiy picker 'unselect' event.
+    events = picker.emitted().unselect
+    expect(events.length).toBe(1)
+    emojiData = events[0][0]
+    expect(emojiData.id).toBe('grinning')
   })
 
   it('selectable emoji removed when x icon clicked', async () => {
-    let emoji = picker.find('[data-title="heart_eyes"]')
-    await emoji.trigger('click')
-
     let selectedEmoji = picker.findComponent(SelectedEmoji)
     await selectedEmoji.find('.emoji-delete').trigger('click')
 
     // Selected emoji emitted the 'remove' event
     let events = selectedEmoji.emitted().remove
     expect(events.length).toBe(1)
     let emojiData = events[0][0]
-    expect(emojiData).toBe(index.emoji('heart_eyes'))
-
-    // Selected emoji is not displayed (Picker removed it)
-    let selectedEmojiAfter = picker.findComponent(SelectedEmoji)
-    expect(selectedEmojiAfter.exists()).toBe(false)
+    expect(emojiData).toBe(index.emoji('grinning'))
   })
 })
 

src/components/Picker.vue

@@ -144,7 +144,6 @@ export default {
     return {
       activeSkin: this.skin || store.get('skin') || this.defaultSkin,
       view: new PickerView(this),
-      selectedEmoji: undefined,
     }
   },
   computed: {
@@ -249,34 +248,24 @@ export default {
         // for example, if we search for "asdf".
         return
       }
-      if (this.selectable) {
-        // When 'selectable' mode is on, selecting the same emoji
-        // will uneslect it.
-        if (this.selectedEmoji == this.view.previewEmoji) {
-          this.$emit('unselect', this.view.previewEmoji)
-          this.selectedEmoji = undefined
-          return
-        }
-        this.selectedEmoji = this.view.previewEmoji
+      if (this.selectedEmoji == this.view.previewEmoji) {
+        // Selecting the same emoji will uneslect it.
+        this.$emit('unselect', this.selectedEmoji)
+        return
       }
       this.$emit('select', this.view.previewEmoji)
       frequently.add(this.view.previewEmoji)
     },
     onEmojiClick(emoji) {
-      if (this.selectable) {
-        if (this.selectedEmoji == emoji) {
-          this.$emit('unselect', emoji)
-          this.selectedEmoji = undefined
-          return
-        }
-        this.selectedEmoji = emoji
+      if (this.selectedEmoji == emoji) {
+        this.$emit('unselect', emoji)
+        return
       }
       this.$emit('select', emoji)
       frequently.add(emoji)
     },
     onUnselectEmoji() {
       this.$emit('unselect', this.selectedEmoji)
-      this.selectedEmoji = undefined
     },
     onTextSelect($event) {
       // Prevent default text select event.

src/utils/shared-props.js

@@ -113,9 +113,9 @@ const PickerProps = {
       return {}
     },
   },
-  selectable: {
-    type: Boolean,
-    default: false,
+  selectedEmoji: {
+    type: Object,
+    default: undefined,
   },
 }