Vuetify: Segmented button not working correctly.

[duebbert]

Steps to reproduce

1. Create segmented button. Example #3 from https://vuetifyjs.com/components/buttons

Versions

0.13.1

What is expected ?

According to the spec (https://material.io/guidelines/components/buttons.html#buttons-dropdown-buttons) when clicking the left part of the segmented button then it should fire an action while if the right part (the arrow) is clicked then it should show the dropdown selection. Quote:

Segmented dropdown button

A segmented dropdown has two sections: the current state and the dropdown arrow icon. Pressing the current state will cause that state’s action to fire within the screen. Pressing the dropdown arrow will display all the state options. Selecting one will change the displayed state.

(Very similar to a split button in Bootstrap: http://v4-alpha.getbootstrap.com/components/dropdowns/#split-button-dropdowns)

What is actually happening ?

When clicking the left part, the dropdown selection opens.

Reproduction Link

Codepen is not working at the moment (showing an error when trying to fork) but it's example #3 on https://vuetifyjs.com/components/buttons

[johnleider]

Meh, I'm so tired of btn-dropdown.

[duebbert]

Yes, sorry to be a pain but while you're add it another thing: when the selection dropdown has opened I would expect to be able to close it again by clicking the arrow or the whole button (if not segmented).

This would be in line with the spec that says not to repeat the currently selected option in the dropdown... but it's not explicitly mentioned anywhere what to do when the arrow or button itself is clicked while the dropdown is open.

[johnleider]

This was fixed with #1470

[duebbert]

Seems this bug is back in 0.15.3...

[denno020]

Looking at the docs for 1.3.12, this bug is still present

[jacekkarczmarczyk]

We kindly ask users to not comment on closed/resolved issues. If you believe that this issue has not been correctly resolved, please create a new issue showing the regression or reach out to us in our Discord community.

Thank you for your contribution and interest in improving Vuetify.