tailwindcss-stimulus-components icon indicating copy to clipboard operation
tailwindcss-stimulus-components copied to clipboard

Permit use Turbo frame on tabs click -Possible solution-

Open sergitejada opened this issue 3 years ago • 3 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

sergitejada avatar Jan 30 '23 16:01 sergitejada

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

excid3 avatar Jan 30 '23 16:01 excid3

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

sergitejada avatar Jan 30 '23 16:01 sergitejada

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

excid3 avatar Jan 30 '23 20:01 excid3