Skip to content
New issue

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

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

Already on GitHub? # to your account

Panel tabs are nor filtered by default (display all on load until manually filtered) #120

Closed
noraj opened this issue Dec 3, 2020 · 4 comments
Assignees
Milestone

Comments

@noraj
Copy link
Contributor

noraj commented Dec 3, 2020

Versions
BulmaJS: 0.12
Browser: FF 83.0
Operating system: ArchLinux

Describe the bug

Panel tabs are nor filtered by default (display all on load until manually filtered)

I didn't put a data-all attribute and set is-active on a data-target but by default all panel-block are displayed instead of filtering on the active data-target.

In addition to the click event listener there should be a load event listener that filter the active tab.

* Setup the events to handle tab changing
* @returns {void}
*/
setupNavEvents() {
Bulma.each(this.navItems, (navItem) => {
navItem.addEventListener('click', () => {
this.setActive(navItem.getAttribute('data-target'));
});
});
}

To Reproduce

  1. Copy the example form https://bulmajs.tomerbe.co.uk/docs/0.12/2-core-components/panel-tabs/
  2. Remove <a class="is-active" data-all>All</a>
  3. Put is-active to the public tab

Expected behavior

Filtered with the default element on load.

Screenshots

Unfiltered on load (display all), filtered only manually with onClick event.

@noraj
Copy link
Contributor Author

noraj commented Jan 23, 2021

@VizuaaLOG Have you an idea of workaround until it is fixed?

@VizuaaLOG
Copy link
Owner

@noraj I believe you should be able to manually call the setActive method on the panel tabs instance. Something like below, this is untested and I'm writing it on my phone but should give an idea 😅

Bulma(myPanelTabsSelector).data('panelTabs').setActive(document.querySelector(isActiveTabSelector).getAttribute('data-target'));

Something like that run on load would essentially be how the plugin would handle this internally. Syntax may not be accurate but hopefully gives the idea.

@VizuaaLOG VizuaaLOG added this to the 0.12.1 milestone Jan 29, 2021
VizuaaLOG pushed a commit that referenced this issue Jan 30, 2021
When the plugin has initialised look for a nav item with `is-active` and use this as the active state. If none is found then use the first item.
@VizuaaLOG
Copy link
Owner

@noraj This has been now been fixed in 0.12.1, this new version has been submitted to NPM but may take a few mins to show up.

@noraj
Copy link
Contributor Author

noraj commented Jan 31, 2021

Awesome 🚀

# for free to join this conversation on GitHub. Already have an account? # to comment
Projects
None yet
Development

No branches or pull requests

2 participants