Dropdown and Split Button Suggestions

I like the new Dropdown and Split buttons. Yay! I was using a Select component to mimic this and it was far from ideal. I am replacing these with Dropdown buttons in a key app as we speak.

I see a significant issue with the split button however. You need to click the arrow to select button, but then you need to click the button to fire. That is two steps. The user will expect that when he drops down the button options and clicks something that the action will happen right there and then, like it does on the Dropdown button. I know my users are going to be frustrated by this so I cannot yet put the spit button in play for a couple of apps that could really use it.

If this is not the behavior others want, then an option to decide how it should function would be even better.

Secondly, I would like to be able to set the Split button's currently selected item programatically. The docs are still not up so maybe there is a way, but playing with intellisense has yielded no answers yet.

The last item is for both. I would like to be able to add divider lines between and color to the items. Here is an example from your Apps page that is a good model.

image

3 Likes

Hey @bradlymathews! As always, thank you for the feedback.

  1. Split Button behavior: We designed this to work like the PR/Draft PR button on GitHub, but the interaction you described makes sense too — we actually use both in our own UI! We'll look into adding an option to trigger a menu item on click instead of select it.

  2. There isn't an API to select an option yet. We'll be adding setSelectedIndex soon!

  3. Dividers and colors are both on the list, though we don't have a specific timeline for them at the moment.

1 Like

Any idea when you'll add the ability to set the selected item/index on a split button?

Right now, when I click the button and then hide/disable a specific item from it, the hidden/disabled item remains visible and clickable as the selected item until the user changes it from the dropdown.

1 Like

@evanatonecare Hey there! Went ahead and wrote up a feature request for this functionality, thanks for sharing that feedback :+1: Will update here when progress is made!

1 Like

Hi,

I'm interested in different behavior of this button so it will trigger on select and reverts back to the initial state. +1

1 Like

Hi,

Any update on the ability to select an option and trigger an event without the need for the 3rd click (arrow + selection + button)? +1 for this feature request. I'm considering to use a temp state onload to get the button.selectedItem + periodic check-in on the button.selectedItem if different then do trigger event to force the behavior of: selection leads to trigger event. This is not ideal... anybody else have any better hacks around this?

1 Like

+1

1 Like

It's still pretty hacky, but you could have a dummy query that watches for changes in the selectedIndex of the split button:

Then, you could trigger different success events based on the selected item:

1 Like