only one of the two actionButtons responds in shiny - r

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()?