flowbite icon indicating copy to clipboard operation
flowbite copied to clipboard

Flowbite Carousel: Failed to execute 'add' on 'DOMTokenList': The token provided must not be empty.

Open shadesOfcodes opened this issue 3 years ago • 1 comments

Describe the bug Created a new carousel instanced passed in all the necessary options and got the above error

JS

const options = {
    activeItemPosition: 1,
    interval: 3000,
    indicators: {
        activeClasses: 'bg-indi-act',
        inactiveClasses: 'bg-indi-def  hover:bg-gray-800',
        items: [
            {
                position: 0,
                el: document.getElementById('carousel-indicator-1')
            },
            {
                position: 1,
                el: document.getElementById('carousel-indicator-2')
            },
            {
                position: 2,
                el: document.getElementById('carousel-indicator-3')
            },
        ]
    }
}

const carousel = new Carousel(items,options);

carousel.cycle()

### MARKUP

<div class="flex  rounded absolute bottom-5 left-1/2 z-30 space-x-3 -translate-x-1/2">
        <button id="carousel-indicator-1" type="button" class="w-3 h-3  rounded-full" aria-current="false" aria-label="Slide 1" ></button>
        <button id="carousel-indicator-2" type="button" class="w-3 h-3 rounded-full" aria-current="false" aria-label="Slide 2"></button>
        <button id="carousel-indicator-3" type="button" class="w-3 h-3 rounded-full" aria-current="false" aria-label="Slide 3"></button>
    </div>

To Reproduce Steps to reproduce the behavior:

Expected behavior A clear and concise description of what you expected to happen. carouse

Screenshots If applicable, add screenshots to help explain your problem. Screenshot (139)

shadesOfcodes avatar Mar 30 '22 04:03 shadesOfcodes

Found out the bug was caused due to the extra white space presents in the inactiveClasses, The particular line in the carousel library leading to the bug is

indicator.el.classList.add(...this._options.indicators.inactiveClasses.split(" "))

in _setActiveItem() method

 _setActiveItem(position) {
        this._activeItem = this._items[position]

        // update the indicators if available
        if (this._indicators.length) {
            this._indicators.map(indicator => {
                indicator.el.setAttribute('aria-current', 'false')
                indicator.el.classList.remove(...this._options.indicators.activeClasses.split(" "))
                indicator.el.classList.add(...this._options.indicators.inactiveClasses.split(" "))
            })
            this._indicators[position].el.classList.add(...this._options.indicators.activeClasses.split(" "))
            this._indicators[position].el.classList.remove(...this._options.indicators.inactiveClasses.split(" "))
            this._indicators[position].el.setAttribute('aria-current', 'true')
        }
    }

ghost avatar Mar 30 '22 04:03 ghost