only one of the two actionButtons responds in shiny

Question

I have shiny app example as below. I need to have two selectInput controls and each selectInput only responds when I click on action button.

What I found is the first action Button applyNameFilter does not respond at all. It's not highlighted when hovered over. The second action button applyTimeFilter seems to be OK.

Does anyone know why? It's so weird... I have no clue how to fix that and looking for help here. Thanks a lot.

library(shinydashboard)
library(shiny)
library(shinyWidgets)
library(shinyjs)
library(dplyr)


df = data.frame(Name = c('A', 'B', 'C', 'A', 'B', 'C'),
       Year = c('2020', '2020', '2020', '2019', '2019', '2019'),
       Value = c(12, 33, 44, 55, 22, 11))

ui <- dashboardPage(
    dashboardHeader(title = "Example" ),
    dashboardSidebar(
        sidebarMenu(
            menuItem("tab", tabName = "tab", icon = icon("globe"))
        ) 
    ), 
    dashboardBody(

        useShinyjs(),

        tabItems(

            tabItem(tabName = "tab",

                    div(id = 'timeAllFilters',
                        box( width=12, background = 'green',

                             selectizeInput(inputId = 'year', 
                                            label='Select Year',
                                          choices = c('', '2020', '2019'),
                                          multiple=FALSE,
                                          options = list(
                                              maxItems = 1,
                                              placeholder = '',
                                              onInitialize = I("function() { this.setValue(''); }"))),

                             actionBttn(
                                 inputId = 'applyTimeFilter',
                                 label = "Apply", 
                                 style = "gradient",
                                 color = "danger",
                                 icon = icon("") ),
                             actionBttn(
                                 inputId = 'clearTimeFilter',
                                 label = "Clear", 
                                 style = "gradient",
                                 color = "danger",
                                 icon = icon("") ) 
                        )  #box
                    ), #div


                    div(id = 'nameAllFilters',
                        dropdown(
                            tags$h3("Filters"),
                            selectizeInput(inputId = 'name', 
                                           label='Select Name',
                                           choices = c('','A', 'B'),
                                           multiple=FALSE,
                                           options = list(
                                               maxItems = 1,
                                               placeholder = '',
                                               onInitialize = I("function() { this.setValue(''); }"))),

                            actionBttn(
                                inputId = 'applyNameFilter',
                                label = "Apply", 
                                style = "gradient",
                                color = "danger",
                                icon = icon("") ),
                            actionBttn(
                                inputId = 'clearNameFilter',
                                label = "Clear", 
                                style = "gradient",
                                color = "danger",
                                icon = icon("") ) 
                        )  #dropdown
                    ), #div

                    dataTableOutput('table')
            ) #tabItem
        ) #tabItems
    ) #dashboardBody
) #dashboardPage


server <- function(input, output, session) {


    df1 = reactive({
        input$applyTimeFilter
        isolate( df %>% filter(Year %in% input$year) )
    })

    # clear time filters 
    observeEvent(input$clearTimeFilter, {
        reset("timeAllFilters")
    })


    df2 = reactive({
        input$applyNameFilter
        isolate ( df1() %>% filter(Name %in% input$name) )
    })

    # clear name filters 
    observeEvent(input$clearNameFilter, {
        reset("nameAllFilters")
    })

    output$table = renderDataTable({
        DT::datatable(df2())
    })
}

shinyApp(ui = ui, server = server)

Answer 1

The issue appears to be with the actionBttn being inside box() . It works just fine without. Any chance you could find another way to get the same style without box() ?