The shiny conditional panel fails to evaluate upon initialization

When utilizing conditional panels to dynamically build up my Shiny app, I've noticed that the condition the panel is based on is not initially evaluated. The panel remains visible by default and only becomes hidden after certain actions are taken. This results in the panel being visible even when the condition (input.select1.length = 0) is not met.

For a minimal working example:

Server.R:

shinyServer(function(input, output,session){
  output$selectInput1 <- renderUI({
    selectInput(
      inputId = "select1",
      label = "Select",
      choices = c('1','2','3'),
      selected = NULL,
      multiple = TRUE
    )
  })
})

UI.R:

dashboardPage(
  title = "",

  ## Header content + dropdownMenu
  dashboardHeader(
    title = tags$b(""),
    titleWidth = 250
  ),

  ## Sidebar content
  dashboardSidebar(
    width = 250,
    sidebarMenu(
      id = "tabs",
      menuItem("tab1", tabName = "tab", icon = icon("table"))
    )
  ),

  ## Body content
  dashboardBody(
    tabItems(
      tabItem(tabName = "tab",
        div(
          div(
            style="float: left; padding-left: 20px; padding-right: 20px; width: 350px; background-color: #F4F4F4; height: calc(100vh - 50px) !important;",
            uiOutput('selectInput1')
          ),
          div(
            conditionalPanel(
              condition = "input.select1.length > 1",
              p('hi')
            )
          )
        )
      )
    )
  )
)

Answer №1

According to @porkchop's suggestion, you have the option to set the condition within the renderUI function in server.R:

Server.R:

shinyServer(function(input, output,session){
  output$selectInput1 <- renderUI({
    selectInput(
      inputId = "select1",
      label = "Select",
      choices = c('1','2','3'),
      selected = NULL,
      multiple = TRUE
    )
  })
  output$panel1 <- renderUI({
    if(!is.null(input$select1) && length(input$select1) > 0){
      condition1 = 'true'
    } else {
      condition1 = 'false'
    }
    conditionalPanel(
      condition1,
      p('hi')
    )
  })
})

UI.R:

dashboardPage(
  title = "",

  ## Header content + dropdownMenu
  dashboardHeader(
    title = tags$b(""),
    titleWidth = 250
  ),

  ## Sidebar content
  dashboardSidebar(
    width = 250,
    sidebarMenu(
      id = "tabs",
      menuItem("tab1", tabName = "tab", icon = icon("table"))
    )
  ),

  ## Body content
  dashboardBody(
    tabItems(
      tabItem(tabName = "tab",
        div(
          div(
            style="float: left; padding-left: 20px; padding-right: 20px; width: 350px; background-color: #F4F4F4; height: calc(100vh - 50px) !important;",
            uiOutput('selectInput1')
          ),
          div(
            uiOutput('panel1')
          )
        )
      )
    )
  )
)

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

A guide to placing tooltips dynamically in highcharts column charts

I am encountering an issue with tooltips in Highcharts column charts. The problem arises when the series fill up my chart, causing the tooltip to be hidden below the series and cut off by the end of the div. You can see an example here: https://i.stack.i ...

What could be the reason for the sender message to only display once the recipient sends a message? (socketio) (nodejs) (reactjs)

Currently, I am working on developing a real-time chat application using Node.js, React, and Socket.io. The chat functionality is operational in theory, but there seems to be an issue where the sender's message only appears on the recipient's scr ...

Oops, it seems like there is a TypeError with the function window.initMap in Google Maps

For the past week, I have been struggling to update my marks on Google Maps while using AJAX in an HTML page. My controller fetches data from the database and sends it back, but now I am encountering the following error: TypeError: window.initMap is not a ...

Is the Angular $watch function able to track changes on an object's prototype members as well?

I have encountered a challenge with a tree structure implemented in Javascript which has circular references. The objects in the structure contain an array of children, but these children also need to reference their parent for deletion purposes. To monit ...

Combine two elements in an array

I am faced with a challenge in binding values from an Array. My goal is to display two values in a row, then the next two values in the following row, and so on. Unfortunately, I have been unable to achieve this using *ngFor. Any assistance would be greatl ...

Ensuring a Fixed Delta Tooltip in lightweight-charts is essential for maintaining a seamless

I have implemented lightweight-charts to present a chart using mock data. I am looking to establish a fixed Delta Tooltip on the chart when the page loads, with predetermined start and end dates that are specified as input. Furthermore, I aim to restrict t ...

Using jQuery to count children and show the outcome when hovering

I have implemented an alphabetical search functionality for products. When a letter is clicked, all products starting with that letter are displayed. However, I want to display the selected letter at the top and hide the rest of the letters. Should I use ...

The magnitude of each new keystroke is squared compared to its predecessor

exploring the relationship between keyboard and console inputs Each subsequent e.key entry is occurring twice as frequently as the previous one. Once it reaches 8-9 characters, the rendering frequency skyrockets to over 1000 times per character. Here&apos ...

The React-Native app freezes on the splash screen when running on iOS, while it functions perfectly on Android

My React-Native 0.62.3 app is not working on iOS. It launches, receives the bundle from metro, and then just displays the splash screen without any further action. Here's the run log: flipper: FlipperClient::addPlugin Inspector flipper: FlipperClient: ...

"Finding a way to redirect users after clicking on a download link when onclick event is already in use

Below is a snippet of code that I am working with: <input type="checkbox" id="myCheck"> span class="checkmarkz"></span> <a href="test.zip" class="download" onclick="return ifchecked( ...

What is the best way to map elements when passing props as well?

In my code, I am using multiple text fields and I want to simplify the process by mapping them instead of duplicating the code. The challenge I'm facing is that these textfields also require elements from the constructor props. import React, { Compon ...

Create a new project in Express 4 with necessary dependencies that are reliant on having Express

Currently, I am working on a Node.js project that utilizes the latest version of express (4.3). However, I have come across a situation where one of my dependencies relies on express 3.3. Will this setup work or do I need to ensure all submodules are using ...

Handling error messages with Django and Ajax

Is there a way to display error messages with Django? Here is how I am currently thinking of handling it (using jsonresponse as an example): def test(request): if request.method == "POST": if form.is_valid(): form.save return JsonResponse( ...

Why is it that GetElements does not provide immediate results upon execution?

Just diving into the world of Javascript for the first time and experimenting with it on Chrome, but running into unexpected results. When I try: document.getElementsByTagName("h1") I anticipate seeing: <h1>tester h1 in body</h1> Instead, wh ...

Avoid displaying "undefined" on HTML page when Firebase database value is empty

I am trying my best to explain my issue, although I struggle with scripts. Please bear with me and help me improve. ˆˆ Below is the script I am working on. The goal is to display all records with a date set for 'today or in the future'. Progr ...

Keep executing the ajax function until a successful response is received from another ajax call

I need to implement a chained ajax function where one function will only execute after another function returns success. Here is the initial function that I need to wait for before moving on to the next function: Ajaxfunction1 $.ajax({ type : "G ...

The hyperlinks in the navigation bar are leading me to incorrect destinations

I am currently developing an authentication app and facing an issue with the navbar links for register and login. They are not redirecting me to the correct destination. These links work perfectly on the landing index page, but not on any other page. site ...

When using Vuejs2, the list of autosize textareas connected to an expanding array of objects does not properly update their values

After binding https://github.com/jackmoore/autosize to textareas within a v-for loop, I've noticed an unexpected data persistence issue while expanding the array linked to that list: While inputs on the left side move downward as intended, new textar ...

Using Node.js to separate applications on the same URL based on different paths

We currently have a server hosting one domain, where we have placed apps separately using specific URL paths. For instance, the front-end of our app is mapped to the main URL (/). Requests to / will be directed to the front-end app, while adding /api in ...

Create a customized bracelet with a specified number of colors in JavaScript

I encountered an interesting challenge recently. The task was to create a bracelet of length n using a set of specified colors, following certain conditions: No two adjacent beads should have the same color (e.g., R R). A pattern of three consecutive bea ...