Tabs: Scrollable Tabs inside Form - Clicking on scroll button causing Form to submit

[1Map]

Describe the bug

https://primevue.org/tabs/#scrollable

When Tabs is scrollable and inside a form, then, when you click on the scroll button, it causes the form to submit. Please make sure the scroll buttons inside the Tabs are marked as type="button" to not cause this to happen

https://github.com/primefaces/primevue/blob/81f55dade7d05e399a613c966961bfba0b7363c7/packages/primevue/src/tablist/TabList.vue#L4

https://github.com/primefaces/primevue/blob/81f55dade7d05e399a613c966961bfba0b7363c7/packages/primevue/src/tablist/TabList.vue#L23

Another Suggestion:

Your code is currently like:

        onPrevButtonClick() {
            const content = this.$refs.content;
            const width = getWidth(content);
            const pos = content.scrollLeft - width;

            content.scrollLeft = pos <= 0 ? 0 : pos;
        },
        onNextButtonClick() {
            const content = this.$refs.content;
            const width = getWidth(content) - this.getVisibleButtonWidths();
            const pos = content.scrollLeft + width;
            const lastPos = content.scrollWidth - width;

            content.scrollLeft = pos >= lastPos ? lastPos : pos;
        },

I would suggest you bring in preventDefault

        onPrevButtonClick(evt) {
            evt.preventDefault();

            const content = this.$refs.content;
            const width = getWidth(content);
            const pos = content.scrollLeft - width;

            content.scrollLeft = pos <= 0 ? 0 : pos;
        },
        onNextButtonClick(evt) {
            evt.preventDefault();

            const content = this.$refs.content;
            const width = getWidth(content) - this.getVisibleButtonWidths();
            const pos = content.scrollLeft + width;
            const lastPos = content.scrollWidth - width;

            content.scrollLeft = pos >= lastPos ? lastPos : pos;
        },

Reproducer

https://stackblitz.com/edit/primevue-4-vite-issue-template-rvleve

PrimeVue version

4.0.1

Vue version

3.x

Language

ES6

Build / Runtime

Vite

Browser(s)

No response

Steps to reproduce the behavior

Click on scroll buttons in Tabs

Expected behavior

Needs to scroll the tabs left/right

[Caminyx]

I have the same issue.