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

containerClass doesn't change when having multiple collection with different containerClass values #595

Open
claudioldf opened this issue Jan 28, 2021 · 0 comments

Comments

@claudioldf
Copy link

claudioldf commented Jan 28, 2021

Hey guys,
I'm having an issue related to containerClass, and I'm not sure if is really an issue or if it is the expected behavior, sound like an issue indeed to me.

Context: I have multiple collections and each collection has a different containerClass value.
When the menu is triggered for the first collection, the menu is created and stored in this.menu, which looks good.
However, when triggering to open the menu for another collection, it is rendering the containerClass with the values from the first collection instead.

I suppose it happens due to this if condition:
https://github.com/zurb/tribute/blob/master/src/Tribute.js#L288

How can we reproduce this bug?

  1. Create 2 colletions (eg: "@" and "#") and define two different class for each one in the containerClass
  2. Type "@" to open the first collection fo example, then close the menu
  3. Then type "#" to open the second collection, and if you check the rendered element it was rendered using the containerClass from first collection open.

Codepen
https://codepen.io/claudioldf/pen/BaQBRJR?editors=1010

What did you expect to happen?
It is expected that each collection menu use its own containerClass

What happened instead?
The containerClass doesn't change when having triggering collections with different containerClass values

What I did to solve this now was to add this code above this line

    ....

    /* begin: my code */
    if (
      this.menu &&
      this.current.collection.containerClass !== this.menu.classList.value
    ) {
      this.menuEvents.unbind(this.menu);
      this.menu = null;

      Object.assign(element, {
        tributeMenu: null
      });
    }
    /* end: my code */

    // create the menu if it doesn't exist.
    if (!this.menu) {
      this.menu = this.createMenu(this.current.collection.containerClass);
    ....

Not sure if is the best approach, but it works for me lol
I can open a PR fixing that, and of course, if you have any other suggestions on how to fix that would be welcome.

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

No branches or pull requests

1 participant