Using emojisToShowFilter seems to crash the picker

[RedKage]

      <picker :emojis-to-show-filter="emojisToShowFilter"/>

methods: {
    emojisToShowFilter (emoji) {
      console.log(emoji.short_names[0])
      return true
    }
}

Creates the following error TypeError: Cannot read property 'push' of undefined at VueComponent.created (emoji-mart.js?28c6:3422)

It seems that in emoji-mart.js, the this.categories is undefined when I use emojisToShowFilter() it happens in the created function.

    RECENT_CATEGORY.emojis = this.recentEmojis;
    CUSTOM_CATEGORY.emojis = this.customEmojis;

    this.categories.push(RECENT_CATEGORY);
    (_categories = this.categories).push.apply(_categories, (0, _toConsumableArray3.default)(categories));
    this.categories.push(CUSTOM_CATEGORY);

If I remove :emojis-to-show-filter from the template the this.categories exists as an empty array.

I debugged and iterated inside the var categories = this.parsedData.categories.map(function (c) {}) Inside this map function everything works as intended, it's calling my function, my function returns true, the emojis var gets populated properly. Category by category.

I'm not sure what's going on.

[RedKage]

Hmmm spotted something else

This piece of code right there in emoji-mart.js, in the data() function:

    if (this.emojisToShowFilter) {
      customEmojis = customEmojis.filter(function (e) {
        return _this.emojisToShowFilter(_this.parsedData.emojis[e] || e);
      });
      recentEmojis = recentEmojis.filter(function (e) {
        return _this.emojisToShowFilter(_this.parsedData.emojis[e] || e);
      });
    }

The _this.parsedData is undefined. So it crashes there. I guess that's the real error. Since the data() function crashes, it doesn't return categories: [] and later I get the previous crash

[RedKage]

I confirm, I locally edited and commented

      recentEmojis = recentEmojis.filter(function (e) {
        return _this.emojisToShowFilter(_this.parsedData.emojis[e] || e);
      });

Now everything works!

[RedKage]

I think .... it's because recentEmojis does not contain emojis object: it contains strings.

0:"+1"
1:"grinning"
2:"kissing_heart"
3:"heart_eyes"
4:"laughing"
5:"stuck_out_tongue_winking_eye"
6:"sweat_smile"
7:"joy"
8:"scream"

Indeed there is no parsedData for each entry.

The issue is there: the recentEmojis object does not contain emojis objects. It needs to contain emojis object as the emojisToShowFilter expects an emoji object.

[RedKage]

Actually, it crashes also in

      customEmojis = customEmojis.filter(function (e) {
        return _this.emojisToShowFilter(_this.parsedData.emojis[e] || e);
      });

Because in the custom emojis array there is no parsedData attribute, as per the documentation https://github.com/jm-david/emoji-mart-vue#custom-emojis

[coolstackdev]

@RedKage Is there any alternative solution for excluding specific emoji?

[RedKage]

@RedKage Is there any alternative solution for excluding specific emoji?

It's been a while, I moved on to another UI and have now simple unicode emoji picker on desktop. I re-read this issue and frankly I don't remember anything!

Looks like this project is kinda dead though. Maybe worth a look at some other forks or an entirely different package to handle emojis