When select elements with control in selectInput new chrome page is opening, how could I avoid it?

shiny
1

Hi,

I am using shinydashboard. When I click in a selectInput with the control or shift button more than one option a new chrome page is opening. How could I avoid this interaction?

Thanks,
All the best,
Ibon

2

Hi Ibon,

Could you please reply with a small reproducible example of your dashboard that opens multiple ? This way I can reproduce exactly what you are seeing.

Thank you,
Barret

3

Hi Barret,

Thanks for answering. Unfortunately, I can't share the code. I have explained my problem with an image. So each time I select with control button new chrome tab is opening. It happens on the server but not when I try on a local machine.

20181012_reportingError
20181012_reportingError1762×990 416 KB

Thanks,
All the best,
Ibon

4

It’s likely that it will be hard for anybody to sort out what’s happening without some code. However, there’s no need to share the code for your entire dashboard. What I think @barret was suggesting was making a small example app that exhibits the same problem behavior. We have some more explanation of how to make shiny reproducible examples here: Shiny debugging and reprex guide

1 Like
5

You are right. Please, find attached a simple example.

  1. Inside Rstudio it works well.
  2. When I upload in Chrome new tabs are opening when I select more than one city.

Thanks,
Ibon

shinyApp(
  ui = dashboardPage(skin = "blue",
		dashboardHeader(title = "reprexes", titleWidth = 450),
		dashboardSidebar(width = 350,
	  
			 tags$style(".fa-table {color:#33cc33}"),     
			 tags$style(".table2 {color:#0099ff}"),     
			 
			 sidebarMenu(width = 350,
						 menuSubItem( p(""),
									  icon = NULL),
						 menuItem("Example1", icon = icon("table"),
								  menuSubItem(uiOutput("col_sel"),icon = NULL)

								)
						) # sidebarMenu
					), # dashboardSidebar
		
                    
	dashboardBody(    
	  tabBox(width = "500px",
			 
			 tabPanel("Instructions", 
			          h4("Plots") )   # tabPanel
					  )   # tabBox
			)
		),
  server = function(input, output, session) {
    output$col_sel <- renderUI({
    cn <-c("New York", "Paris", "Pekin")
    selectInput("var_1", "Select the variables", 
                choices  = cn,
                selected = 1,
                multiple=TRUE, selectize=FALSE)
	})
  }
)
2 Likes
6

That example will really help others to help you :slight_smile:

Using your example code I was able to continually reduce the code required to produce the problem, until I arrived at this minimal code:

shinyApp(
  ui = dashboardPage(
    dashboardHeader(),
    dashboardSidebar(
      sidebarMenu(
        menuItem(
          "menu", icon = NULL,
          menuSubItem(
            textAreaInput("text", "text"),
            icon = NULL
          )
        )
      )
    ),
    dashboardBody()
  ),
  server = function(input, output) {}
)

This shows us that the problem is not because of the select input. It looks like it's happening because the dashboard places the menusubitem inside a hyperlink. You can notice that by the fact that if you hover your mouse over the entire area, the cursor changes to a link cursor and if you're on chrome then in the bottom left corner you'll see the link.

To show this in an even clearer way, type menuSubItem("test") into the R console, and you'll see the output

<li>
  <a href="#">
    <i class="fa fa-angle-double-right"></i>
    test
  </a>
</li>

which clearly shows that whatever you pass to menuSubItem ends up inside a hyperlink (the a tag)

All of this was just to show you how I debugged this to try to find the source of the problem.

Below is my guess on why you're encountering this problem:

Looking at the documentation of menuSubItem(), it says

Menu items (and similarly, sub-items) should have a value for either href or tabName

Which is violated here. I definitely have seen many dashboards that have inputs inside of the sidebar as menu items, but it looks like (at least my understanding of it) this is not intended behaviour, and the menuitems are meant to only act as clickable links to specific sections in the page. If the menuitems are used as intended, rather than as inputs, then this issue would not come up.

That's only my theory, perhaps there is a standard way of including inputs as menu items, but it seems to me that it's not meant to be supported.

Hope this helps

2 Likes
7

Dear Dean,

Thanks for your instructions. It was helpful, but still, I have the same problem even if I include the tabNames.

I hope someone could find another solution.

All the best,
Ibon

8

My post was not a solution, it was a way to help you get a minimal reproducible example and offer an explanation for why you're encountering a problem. As I tried explaining in my post above, from what I understand (which may not be true) I don't think inputs are meant to exist inside menu items. One potential solution could involve using some javascript to "manually" remove or ignore the hyperlink surrounding the input. But I want to make it very clear that my post was is not trying to offer a solution.

1 Like
9

Dean, your message was very clear. It was an explanation, no a solution.
Thanks

10

replace this with uiOutput("col_sel")

This might help you with your problem.

Thanks!
Heramb

1 Like