excid3 / tailwindcss-stimulus-components

A set of StimulusJS components for TailwindCSS apps similar to Bootstrap JS components.

Home Page:https://excid3.github.io/tailwindcss-stimulus-components/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Permit use Turbo frame on tabs click -Possible solution-

sergitejada opened this issue · comments

I have been using the tabs component and it does not accept Turbo Frame.
The "click->tabs#change" uses event.preventDefault() and does not allow to follow the url of the link.
And when using Turbo-Frame you need to make a request get
My option create a new function and remove event.preventDefault()

    change_with_url(event) {
        // If target specifies an index, use that
        if (event.currentTarget.dataset.index) {
            this.index = event.currentTarget.dataset.index

            // If target specifies an id, use that
        } else if (event.currentTarget.dataset.id) {
            this.index = this.tabTargets.findIndex((tab) => tab.id == event.currentTarget.dataset.id)

            // Otherwise, use the index of the current target
        } else {
            this.index = this.tabTargets.indexOf(event.currentTarget)
        }

        window.dispatchEvent(new CustomEvent('tsc:tab-change'))
    }

I think another attribute could be created

You'll have to provide an example of what you're doing so we can understand what you're trying to do.

image
I'm using Turbo-frame inside a tab action
By default the tab don't permit

You should put the turbo frame inside the tab contents and use the lazy load feature so it only loads when visible.