Submenu already open when dropdown button is toggled

shiny
1

Submenu

I'm attempting to learn javascript ,CSS and HTML and how each of these work with shiny. I have a dropdown button that presents a list of options and a dropdown submenu. When I click the parent menu, the submenu is automatically open. I would like the submenu to stay closed until it is clicked but I can't seem to solve this issue.

My shiny UI code is:

dropdownButton("Monitors", status="default",
  checkboxGroupInput(inputId="monitor", label="", choiceNames = c("Gary IITRI", "Interstate 70", "E.C. Marina"), choiceValues=c("GI", "I- 70 ", "EM")),
  includeHTML("include_script.txt"),
  tags$li(class="dropdown-submenu", 
  tags$a(class="submenu", tabindex="-1", href="#", "Historical Monitors", tags$span(class="caret")),
  tags$ul(class="drowndown-menu", 
          checkboxGroupInput(inputId="test", label="", choiceNames=c("choice1", "choice2"), choiceValues=c("choice1", "choice2"))))
)

the dropdownButton function code is :

 dropdownButton <- function(label = "", status = c("default", "primary", "success", "info", "warning", "danger", "link"), ..., width = NULL) {
  
  status <- match.arg(status)
  # dropdown button content
  html_ul <- list(
    class = "dropdown-menu",
    style = if (!is.null(width)) 
      paste0("width: ", validateCssUnit(width), ";"),
    lapply(X = list(...), FUN = tags$li, style = "margin-left: 10px; margin-right: 10px;")
  )
  # dropdown button apparence
  html_button <- list(
    class = paste0("btn btn-", status," dropdown-toggle"),
    type = "button", 
    `data-toggle` = "dropdown"
  )
  html_button <- c(html_button, list(label))
  html_button <- c(html_button, list(tags$span(class = "caret")))
  # final result
  tags$div(
    class = "dropdown",
    do.call(tags$button, html_button),
    do.call(tags$ul, html_ul),
    tags$script(
      "$('.dropdown-menu').click(function(e) {
      e.stopPropagation();
});")
  )
}

Finally the include_script.txt file

<style>
.dropdown-submenu {
    position: relative;
}

.dropdown-submenu .dropdown-menu {
    top: 0;
    left: 100%;
    margin-top: -1px;
}
</style>

<script>
$(document).ready(function(){
  $('.dropdown-submenu a.submenu').on("click", function(e){
    $(this).next('ul').toggle();
    e.stopPropagation();
    e.preventDefault();
  });
});
</script>