Grouped Buttons with Dropdown

[MayaGans]

Based on tweet - a feature request for grouped buttons with a dropdown as seen on Bootstrap page

Thank you!!!

[MayaGans]

Unsure if this is helpful but I've been working in this codepen - I added some CSS and an "active" class to the users selected button so it acts more like combined radio buttons, giving the user a single input$my_radio_and_dropdown if either a button or item from the list is selected.

https://codepen.io/mayagans/pen/dyoppZK

I guess my vision is that the function groupButtonsAndDropdown() would take on three arguments:

choices = c("NONE", "A", "B", "C")
dropdownName = OTHER
dropdownchoices = c("D", "E", "F")

[MayaGans]

Also posted here: https://github.com/MayaGans/grp_btn_dropdown, I wrote a UI function that may be adaptable, but isn't as elegant as some of your map functions

[nteetor]

I'm all for adding this feature and thank you for sharing the codepen and repo.

The current navInput() implementation demos how button groups and menu inputs could be combined. If a menu input is passed to a nav input, the menu is modified and included in the nav input as a nav dropdown. However, the times I've built applications with nav inputs this "flexibility" hasn't been particularly useful.

I think buttonGroupInput() could adopt a shorthand notation. This might look like,

buttonGroupInput(
  id = NULL,
  choices = list(
    "Choice 1",
    "Choice 2",
    "More choices" = list(
      "Choice 3",
      "Choice 4"
    )
  )
)

The nested list would be converted into a dropdown menu with the label "More choices".

[MayaGans]

I like your approach but tried implementing something here (my first input binding!) https://github.com/MayaGans/grp_btn_dropdown - it's still really janky and fragile so I look forward to seeing what you come up with!

[nteetor]

I did look through your code. All the right pieces are there. In this case I have to consider yonder’s core input api. I’ve tried to make an effort to standardize inputs, their arguments, and how values are interpreted. Even if I weren’t to directly use your code any discussion is invaluable.

I noticed a couple things in your JavaScript code,

• I’d recommend .classList.add() and .classList.remove() over directly modifying .className of a dom element.
• There’s a large chunk of code inside a document.onclick handler. Putting the code inside a document loaded event handler is probably better. I’m curious if the onclick works.

[nteetor]

I’d also welcome a PR if you want to take a stab at updating yonder yourself.

[MayaGans]

Thanks for your comments I'll try applying that! I'm looking at your code now to learn how to write an updateButtonAndMenu function [so the user could update the buttons from the server side] still have a lot to learn before I could integrate this with yonder though 😊thanks again for your help and encouragement!

[nteetor]

It’s the least I could do. Let me know if you have any questions. I’m wrapping up the first version of cascadess and then I’ll turn my attention back to yonder.