VizuaaLOG / BulmaJS

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.

BulmaJS/src/plugins/panelTabs.js

Lines 106 to 115 in 10f5c15

    
                * 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

Copy the example form https://bulmajs.tomerbe.co.uk/docs/0.12/2-core-components/panel-tabs/
Remove <a class="is-active" data-all>All</a>
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.

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

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

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

Awesome 🚀

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