Tabs : Tailwind Stimulus Components : Help Extending : Callbacks on selected/show? MutationObserver?

Donal O Duibhir
Hi, I am hackily using MutationObserver to search for data attributes of panels and then whether or not they contain a "hidden" class or not -> to get/show dynamic content (in tab panels) when they are clicked/viewed. Am not 100% on how to extend the Tabs Stimulus controller.... (in it mentions )? 

In it looks like change and showTab could perhaps be overridden? Chris Oliver ?

How would one:
a) do this, would the below be correct?
a) limit behavior to a specific model/controller in Rails?
b) pass an instance of a model ID to the Tabs Stimulus controller (seems like a data attribute? )?

  showTab() {
    this.tabTargets.forEach((tab, index) => {
      const panel = this.panelTargets[index]

      if (index === this.index) {

        // Update URL with the tab ID if it has one
        // This will be automatically selected on page load
        if ( {
          location.hash =
      } else {

Above from: am guessing in the positive sense of if (index === this.index) { I could add extra stuff? } but am very unsure how to add it. I would need to manually extend the Tabs controller by adding a tabs_controller.js and I would need to modify "app/javascript/controllers/index.js" by removing "Tabs" from being imported and comment out the application.register('tabs', Tabs)

// Load all the controllers within this directory and all subdirectories.
// Controller files must be named *_controller.js.

import { Application } from "stimulus"
import { definitionsFromContext } from "stimulus/webpack-helpers"

const application = Application.start()
const context = require.context("controllers", true, /_controller\.js$/)

import { Dropdown, Modal, **Tabs**, Popover, Toggle, Slideover } from "tailwindcss-stimulus-components"
application.register('dropdown', Dropdown)
application.register('modal', Modal)
** application.register('tabs', Tabs) **
application.register('popover', Popover)
application.register('toggle', Toggle)
application.register('slideover', Slideover)

then create a "tabs_controller.js" with the below?

import { Tabs } from "tailwindcss-stimulus-components"

export default class extends Tabs {

  showTab() {
    this.tabTargets.forEach((tab, index) => {
      if (index === this.index) {
        // Do extra Stuff? 
You’re not receiving notifications from this thread.
© 2021 GoRails, LLC