Add option to "unselect" emoji

[mejo-]

It would be really helpful if the emoji picker could (optionally) provide a a way to unselect an emoji (or select "none").

When using the picker for selecting an emoji for an object (e.g. "choose the emoji for this document"), people expect to be able to remove the selected emoji later (without having to choose a different emoji). On the other hand, having a separate option in the UI just to unselect the emoji, would be a bit too much.

So it would be really handy if the picker would support a property like emptySelection that exposes the option to select "empty emoji" inside the picker (which then would return e.g. an empty/null emoji object).

Do you think that's feasible?

Thanks a lot for maintaining emoji-mart-vue, it's a very useful piece of software. We use it in a lot of places for picking emojis in the Nextcloud UI.

[serebrov]

@mejo- I am not sure how this would work, how and where would this "unselect" option be displayed in the picker?

Probably, the picker could keep track of the selected emoji and when you open it, display it and allow to "unselect" it.

Still sure how this would look in the UI, but also it does not play well with some scenarios where the picker can be used: I used it to add emojis to the input field, similar to what we can see in Slack - we open the picker and click on some emojis that are populated into the text field, then emojis can be deleted with backspace if needed (but this is out of the picker responsibility).

Questions:

• If implemented in the picker, how the UI would look like?
• How the picker configuration should be changed in order support this case? We should be able to somehow turn this new feature on and off as it is not needed in all scenarios.

Options to consider:

• Implement this outside the picker. I mentioned the case of the text input above where emojis can be removed with backspace.
• Use custom emoji to add the "emptySelection" option. You can add a special image that represents the empty selection, although not sure if it can be made clear enough for the user.
• Use custom search or preview panes and add the selected/unselect option

The last option, to use custom search or preview pane might work in your case. You can find an example in demo app.

[mejo-]

Dear @serebrov, thanks for your feedback.

first, I completely agree that this should be an optional feature, to be enabled with a property and off per default.

Probably, the picker could keep track of the selected emoji and when you open it, display it and allow to "unselect" it.

That would mean the selected emoji would need to get passed by the code that uses the picker. It certainly would be an option.

If implemented in the picker, how the UI would look like?

I would a button that allows to "unselect" the emoji. A quick and dirty sketch (see the cancel button next to the search field):

How the picker configuration should be changed in order support this case? We should be able to somehow turn this new feature on and off as it is not needed in all scenarios.

I'd imagine an optional property like allowUnselect that - if set - enabled this feature. For sure, the default would be false.

Implement this outside the picker. I mentioned the case of the text input above where emojis can be removed with backspace.

That would be inconvenient - everytime we have the selected emoji as a button to pick another emoji we would need an extra button to allow unselecting it. That's the very reason why I came up with this feature request 😉

Use custom emoji to add the "emptySelection" option. You can add a special image that represents the empty selection, although not sure if it can be made clear enough for the user.

I agree that this would be hard to discover for users.

Use custom search or preview panes and add the selected/unselect option

That indeed would work, thanks for the hint. But I still think that this feature would be interesting to other users of emoji-mart-vue as well.

If you're open to the feature in general, I could imagine to further look into it and come up with a proper proposal (with help of our design team) and prepare a pull request.

[serebrov]

@mejo- I am hesitating because the "unselect" action has nothing to do with the picker itself: it assumes that there is a selected emoji somewhere, that is not a part of this component.

This way, for this feature to be useful to other users, they have to have some specific situation in the UI, similar to what you have.

I am not against the option and PR is welcome, but we would need to also explain in the documentation how this feature is supposed to be used, as I still do not clearly understand it.

Could you also share more details about your UI, maybe a screenshot? How the "selected" emoji looks and what purpose that "selected" emoji serves?

Practically, it looks like the approach with search template should work, something like this:

<Picker :data="index" :native="true">
    <template slot="searchTemplate" slot-scope="slotProps">
          <input
            type="text"
            :placeholder="slotProps.i18n.search"
            v-on:input="slotProps.onSearch($event.target.value)"
          />
          <button>Unselect button here</button>
    </template>
</Picker>

[mejo-]

Hey @serebrov, sorry for not getting back to you earlier. I forgot a bit to answer here 🙈

So maybe with the following screenshots you get a better understanding: the application (Nextcloud Collectives) provides knowledge database features and each page can get an emoji assigned for better visibility:

As you can see, the emoji picker allows to pick an emoji for pages. And we'd need a way to allow "unselecting" the selected emoji, if people want to remove the chosen emoji from a page instead of selecting a different one.

[serebrov]

@mejo- Have you solved this problem yet? I see your point now, but I am still not sure about the UI.

One option would be to handle this outside the picker and have some "unselect" button near the document emoji (maybe as a little cross to "delete" it).

It is not too hard to add this to the picker and I have a prototype in #268, but I did not find a good way to represent the selected emoji in the UI. I think the "delete" button after the search bar that we've discussed would not be the best choice as it is hard for the user to understand the purpose of that button.

I have two ideas currently:

• Display the selected emoji inside the picker, above all other emojis. It will be removed on click and send the "unselect" event.
• Use the emoji preview at the bottom. It will display the selected emoji and emit "unselect" when clicked. The disadvantage is that the preview area is at the bottom, so it is harder to reach and, again, it might not be clear for the user that it serves as a way to unselect the emoji.

Here is a recording of the prototype:

Screen.Recording.2023-05-06.at.21.13.27.mov

[serebrov]

Also prototyped the external delete button: for me, this option looks best (simple, clear for the user):

Screen.Recording.2023-05-06.at.21.32.09.mov

[jancborchardt]

@serebrov how about combining 2 of your ideas:

Display the selected emoji inside the picker, above all other emojis.

and

delete button

So a delete button overlaid over the emoji displayed on the top inside the picker. This solves/avoids issues:

• Gives clear feedback on which emoji is selected (also when the bottom bar is disabled, which if I remember correctly is possible)
• Makes it clear that clicking the emoji deletes it
• It doesn't change the sizing of the standalone emoji
• It doesn't persistently overlap anything on the standalone emoji

Of course this could also be done using the bottom bar, but I agree with you it might be a bit far.

[mejo-]

First, thanks a lot @serebrov for picking up this issue ❤️ Also, thanks @jancborchardt, I think I like your approach. What do you think about it @serebrov?

[serebrov]

@mejo- @jancborchardt It makes sense, I updated the prototype to move the "delete" button into the component too here is how it works:

Screen.Recording.2023-06-04.at.13.17.54.mov

In the current version, clicking the selected emoji for the second time also "unselects" and I am not sure if it is good to do that. Maybe it is better to only unselect when the user explicitly clicks the "remove" button?

What do you think?

[jancborchardt]

@serebrov super nice! :) The unselection by clicking on the emoji itself probably is necessary to keep the click/tap target big enough.

[serebrov]

@jancborchardt @mejo- I worked more on the prototype and, when it was basically ready to be merged, I realized that the "selected" emoji logic heavily relies on the external state:

• we pass the external "selected" emoji via Picker prop
• when we click another emoji, Picker sends the "selected" event
  • at this point, we should rely on the external code to update the "selected" emoji (since it was passed as a prop, we can not just change it in the Picker code - it is binded to the external state)
• when we click the "x" to remove the selected emoji, Picker sends the "unselected" event
  • again, we can not just clear up the "selected" emoji in the Picker as it is "prop" and should rely on the external code to reset that "selected" emoji to undefined.

It works, but it feels wrong in the Picker code - I realized that when working on tests. Thinking about the solution, I found a much simpler version: add a slot to the same place in the Picker where I put the "selected" emoji - then the whole state can be managed externally (a thin wrapper component could manage both selected emoji and the picker to set/remove it).

Here is the code example.

Functionally it works the same as the prototype above:

Screen.Recording.2023-06-10.at.22.24.22.mov

Let me know if this version works for you. The extra bonus here is that the UI for the selected area can be controlled externally too (I am not sure if my "design" for the "x" icon is good enough for use beyond the demo).

[max-nextcloud]

This indeed looks great! I will explore if we can make use of it for our use case.

[mejo-]

For us this issue is solved with the suggested solution by @serebrov.

See https://github.com/nextcloud-libraries/nextcloud-vue/pull/4381/files#diff-d7f3b7d9ce2fc5c58387de5832a3ab1720a143d1032e1ed2134927a6491b6e6dR163-R179 for the code how we implemented the unselect option in Nextclouds NcEmojiPicker component.