Slack add reaction shows empty box about react-reactions HOT 14 CLOSED

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

from react-reactions.

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

from react-reactions.

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!

from react-reactions.

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 #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.

from react-reactions.

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

from react-reactions.

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.

from react-reactions.

Will continue to try to get it to work.

from react-reactions.

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!

from react-reactions.

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:

from react-reactions.

Oh yes. I knew something looked off.

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

from react-reactions.

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

from react-reactions.

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!

from react-reactions.

Thanks @charkour! Works for me now 🙏

One related item I asked about in #120 (comment) 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.

from react-reactions.

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.

from react-reactions.