Issue with dropdown

[KalaTheMother]

Thanks for your work, it is very useful :) .

I saw an issue on dropdown filter (select) : the dropdown still be closed, never opened (multi and single mode). Then i click on dropdown, it launch a new tab with the homepage link but nothing else.

Thanks and have a good day.

[rubanraj54]

Hi @KalaTheMother , could you please make an example in jsfiddle or something to see what is wrong.

I couldn't reproduce this behaviour in my end.

Cheers, Ruby.

[allankluver]

HI @rubanraj54

I can reproduced the dropdown error if I use the bootstrapVue package instead of bootstrap. Don't know if that's the case here :-)

And thank you for a very nice table. Excellent work!! :)

[KalaTheMother]

Hi,

Sorry for the late. Indeed, i use BootstrapVue. This is the beginning of the table :

For now, i have not a jsfiddle, sorry. I'm agree with @allankluver, Excellent work :)

[sebj54]

I confirm this problem: dropdowns does not work when you use bootstrap-vue instead of Bootstrap's JS (with jQuery).

As I do not want to load jQuery + Bootstrap's JS just for dropdowns, I wrote this little function to reproduce the dropdown's behavior:

enableDropdowns() {
    this.$el.querySelectorAll('[data-toggle="dropdown"]').forEach(($dropdownToggle) => {
        const $dropdown = $dropdownToggle.nextElementSibling
        let isShown = false

        function setIsShown(state) {
            isShown = state
            $dropdown.classList.toggle('show', isShown)
        }

        if (!this.dropdowns.includes($dropdown)) {
            this.dropdowns.push($dropdown)

            $dropdownToggle.addEventListener('click', (event) => {
                event.preventDefault()
                setIsShown(!isShown)
            })

            $dropdown.addEventListener('click', (event) => {
                event.preventDefault()
                setIsShown(false)
            })

            $dropdown.clickOutsideEvent = (event) => {
                const isDropdownOrChildren = $dropdown === event.target || $dropdown.contains(event.target)
                const isDropdownToggleOrChildren = $dropdownToggle === event.target || $dropdownToggle.contains(event.target)

                if (!isDropdownOrChildren && !isDropdownToggleOrChildren) {
                    setIsShown(false)
                }
            }
            document.addEventListener('click', $dropdown.clickOutsideEvent)
        }
    })
}

You just have to add this function to your methods object in your Vue component and call this.enableDropdowns() in your mounted hook. It can be useful as a workaround!

EDIT: I already posted this workaround on another issue: https://github.com/rubanraj54/vue-bootstrap4-table/issues/7#issuecomment-514639412