Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Emoji Mart Picker categories not responding to click events #877

Open
Quetzalfir opened this issue Nov 27, 2023 · 0 comments
Open

Emoji Mart Picker categories not responding to click events #877

Quetzalfir opened this issue Nov 27, 2023 · 0 comments

Comments

@Quetzalfir
Copy link

I'm integrating the Emoji Mart Picker into a Stimulus controller and encountering an issue: the category icons in the picker are unresponsive to clicks, preventing category switching. The picker initializes correctly, and I can select emojis, but I can't switch categories. There are no console errors.

enter image description here

Here are the steps I've taken:

  • Ensured that Emoji Mart does not list React as a dependency, as my project isn't using React.
  • Tried installing React to see if it would resolve the issue, which it didn't.
  • Attempted to follow the documentation for non-React environments, but the issue persists.

I'm also unclear on the role of the data property during the Picker's initialization and whether it's related to this issue. The documentation at Emoji Mart's GitHub doesn't seem to require it explicitly for basic functionality.

Here's my package.json snippet for relevant dependencies:

jsonCopy code

"dependencies": {
    "@emoji-mart/data": "^1.1.2",
    "emoji-mart": "^5.5.2",
    // ... other unrelated packages ...
}

And here's a concise version of my current Stimulus controller setup:

javascriptCopy code

// EmojiPicker_controller.js
import { Controller } from '@hotwired/stimulus';
import * as EmojiMart from "emoji-mart";

export default class EmojiPicker_controller extends Controller {
    // ... other methods ...

    connect() {
        // ... code to check for mobile and initialize picker ...
        this.picker = new EmojiMart.Picker({
            set: 'twitter',
            theme: 'dark',
            onEmojiSelect: (emoji) => this.onEmojiSelect(emoji),
            // ... more options ...
        });

        // ... append to body, set class, and hide ...
    }

    // ... other methods ...
} 

I've also tried different variations of initializing the picker with data passed in, to no avail.

Has anyone experienced this or have suggestions on what could be going wrong?,

also I have noticed that if I do not put a maximum height to the container of the picker then it grows all that it needs to be able to show all the emojis, but this does it without scrollbar. I don't know if this is part of the same problem too.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant