[RELEASED / FREE] Emoji One Area Picker and Converter

New update available
Sync on each keypress. So now instead of waiting for blur to sync text to original element, this is done live.
New state “content” that have the text of the input. Better to use this one because Bubble doesn’t really like only having just an emoji. Content is better in this case than using original input value.

Planned to release a V2 in 1-2 month.

Thanks

2 Likes

Is there a way to just select a single emoji and close the popup once it’s selected?

Thanks for sharing this plugin btw!!

1 Like

That’s exactly what i am looking for as well. Because I want to save it in a data field as an image and it should be just one image selected for displaying on another page. Hope to hear from you. :slight_smile:

Hi @daviddr17 @matthew.walters
This is not possible with the current version. I’m working on a complete review of the plugin and it sould be ready in 1 month. I can consider adding this option.
I will check however if I can set something fast that you could use with the current version

1 Like

sounds great. Thank you for your effort!

1 Like

@matthew.walters I found a solution which is not the best, but I think it will work until the next version will be released.

Just make the container just as wide as one emoji is displayed in the input area. After that put two icons behind the input area: 1. Check Icon, 2. X Icon to reset the input area.

Now create the following workflows for those buttons:

  1. Check- Icon: no no workflow, because when clicking outside of the input element the emoji is “accepted”. Its only for the optics of the user that he knows it will be accepted when clicking on the check symbol.
  2. X-Icon: Clear Picker Emoji ->Set Text Emoji and here just put in a spacebar → SetFocus Emoji

The second step Set Text Emoji is just because I am displaying the picked emoji in another place and want to change it immediately when clicking on the reset icon.

Here you can see how it looks like at the end

This procedure will show just one picked emoji and for the user it seems to be just one emoji selected. After clicking on reset the user can pick a new emoji.

Hope you understand everything cause English is not my native language.

1 Like

@Jici Thanks for looking into this and look forward to the new release !!

1 Like

@daviddr17 Thanks! Let me try this.

1 Like

Hi ! I feel a bit dumb for asking this but I can’t manage to make it work. (I’m fairly new to Bubble and this is my first post :slight_smile: )
I don’t understand what ID attribute I have to use for the EmojiOA A, I first thought it was the multiline input then I tried the text ID of which I display the value but in both cases the picker doesn’t even appear when I am in preview mode.

Am i missing something ?

Hi!
You first need to activate the Attribute ID in your app settings / General tabs (Somethinglike Expose Attribute ID to element).
Once it’s done, Go in the multiline, and give it an Attribute ID (at the bottom of the element edit). Put the same thing in the emoji picker.

Hi @Jici Thanks a lot I can access the picker now :slight_smile:
In my app, I am posting comments and it seems that comments which only contains emoji do not display (comments with emoji AND text do) should I use the converter or something ?

Also do you think it will be possible to stop display the emoji picker once you have selected one ?

Thank your for your time !

Hi!
For the comment only issue, I will need to have a look. Can you post a screenshot of a comment in your DB?
I see a strange behavior on Bubble side when you was entering only an emoji, it didn’t get synced to the original input (This is why I added a state in the last release for the content of input). I would not be surprised if the same thing happen if you store it in DB and try to display it.

Actually there’s no option to auto close the picker. I could consider adding an action and an event to detect user have selected an emoji and close picker. I will think about it because I’m working on a different version actually.

Thanks

Hi ! I’ve been trying to troubleshot my problem and I noticed that the messages which weren’t sent because I didn’t clear the input. It worked by adding “Clear emoji picker OA” at the end of the workflow on my Comment button.

I have one issue remaining is that somehow the first comment I type is always empty no matter what I type in.
I have tried to clear the picker when it is initialized but it doesn’t seem to work consistently, is there an initialization setup that I have missed ? :slight_smile:

Have a nice day !

@benoit.devilliers
Hi!
On which version are you?
This kind of issue should have been fixed since last version.

@Jici

It seems to be the latest one

I’ll PM you

Your issue seem that you are using the input (original) to set the value of the comment. But you should instead use the State of the picker. For a reason that I ignore, Bubble have issue with an emoji only or with first part of comment until your blur. But using the state “Content” of the emoji picker instead.

Try this and let me know :wink:

Hey Jici, great plugin overall.

I notice that some settings from the original input field get ignored when it’s associated with the picker. Most notably, it seems we can’t set a character limit ? I wanted people to be able to pick a single emoji but using the input field’s character limit doesn’t work.
The input’s style also get overwritten, but that’s less of a problem for me.

This is more of a feature request, but would it be possible to have the picker button as a single element ? A simple greyed out smiley face you click which brings up the picker, outside of any input field. This seems more intuitive when the user only has to pick one emoji.

@alix.ladent
Yes. The plugin replace the original input by this one. However, both are synced together. But no styling transfer from one to another.
This is an old library no longer maintained. This is why the plugin is free.
I started to create a brand now one but far to complete it. I would like to keep some nice feature like autocomplete when you enter : (like here in this chat) but be able to make it work with different input and original one.

I’ve not tested, but I know some users have created their own Emoji picker like you wan’t using either RG or my selectize Dropdown plugin + the insert at caret position plugin.

You can also overwrite the css of the plugin by adding your to the page header.
For the character limit, you could consider to use the “content” state to and calculate the length and ask user to reduce the number of characters.

The library have a standalone option. Maybe I will consider to add this option, but it will not be available before 2 weeks.

Hi @Jici ,
In general it’s a really great plugin, thanks for the hard work!
Just one thing is giving me headaches:

The data displayed in the multiline-input gets super mixed up, I guess it’s because the data gets “stuck” in the emoji picker. I tried to clear the emoji picker, but I get the following error:

Screenshot 2021-07-27 172948

and suddenly the workflows also take ages to load.

Do you thing it’s something you can fix?

We really need an emoji picker, so I would really appreciate it! Unbelievable that there are no other emoji-plugins out there …