Slack add reaction shows empty box

[michaelshum]

The default "add reaction" button (SlackSelector) in SlackCounterGroup is an empty box even after downloading fonts/slack-icons-Regular.ttf and fonts/slack-icons-Regular.woff in public/.

However, it shows up after clicking the SlackSelector:

Is there something else we need to do to include the emoji?

Expected behavior I would expect the add reaction button to include required fonts without selecting the SlackSelector.

Screenshots Included in-line

Desktop (please complete the following information):

• macOS
• Chrome
• Version 98.0.4758.102 (Official Build) (x86_64)

Smartphone (please complete the following information):

• N/A

[charkour]

Hey @michaelshum, thanks for reporting this!

Could you provide a stackblitz or code sandbox with the reproduced issue? That will help me quickly diagnose the issue. Thanks!

[michaelshum]

Hey @charkour, here (https://codesandbox.io/s/optimistic-ully-gdmxd4?file=/pages/reactions.js) is a code sandbox with this issue, as well as the one I mentioned in https://github.com/charkour/react-reactions/issues/120.

In https://gdmxd4.sse.codesandbox.io/reactions you can see this issue: empty box before clicking, then after clicking it has the reaction emoji.

In https://gdmxd4.sse.codesandbox.io/subfolder/reactions you can see the other issue: it is an empty box before and after clicking. You can also see that the SlackSelector header is also a row of empty boxes in this case.

[charkour]

Perfect. Thank you! I can take a look soon.

[michaelshum]

Hey @charkour, adding to this issue as I assume they're related: on Safari on iOS the default box is a maple leaf instead of an empty box

[charkour]

Haha very interesting. Seems to be a bug. I have some time today and will work on a fix. Thanks for reporting!

[charkour]

I tried to fix it and released version 0.6.2, but that did not seem to work. I updated the version on CodeSandbox and it breaks it even more.

[charkour]

Will continue to try to get it to work.

[charkour]

Thanks for your patience. This was fixed in v0.6.3 to include the Slack fonts in both the Counter and Selector component.

Thanks for reporting the issue!

[michaelshum]

Hey @charkour, thanks for the update. However now I'm getting that the emoji selection window doesn't have any emojis? Attaching a screenshot below:

[charkour]

Oh yes. I knew something looked off.

Thanks, I can take a look tomorrow unless you'd like to!

[charkour]

Note to self: I think it has to do with the SlackCSS component. It should be separated into one that is for the Selector and one that is for the Fonts

[charkour]

A fix was released in v0.6.4. It was a regression I have naively caused in v0.6.2. Sorry and thanks for reporting!

[michaelshum]

Thanks @charkour! Works for me now 🙏

One related item I asked about in https://github.com/charkour/react-reactions/issues/120#issuecomment-1053749740 is that for files using SlackSelector in subdirectories (eg /subdir), I need to make a copy of the font files in my public folder (eg /public/subdir/fonts/slack-icons-Regular.ttf) to have it render properly. (Separately, I'm also making a copy of these files in /public/fonts).

I'm using Next.js - could this be a quirk of the framework, or am I missing the right way to import fonts correctly? Thanks very much.

[charkour]

Unfortunately, that's currently the right solution. When I ported over the old react reactions lib, it handled fronts this way. In the future, I'll aim to make it easier to use!

Sorry for the current inconvenience, but that's the proper way for now.