shinyAce and shiny.fluent::Pivot

[BorisDelange]

Hi,

I'd like to share a problem, when using a shinyAce editor inside a shiny.fluent::PivotItem.

Here is a reprex :

1. With this first example, the shinyAce::aceEditor doesn't display correctly (it displays a grey box).

library(shiny)
shinyApp(
    ui = fluidPage(
        shiny.fluent::Pivot(
            shiny.fluent::PivotItem(
                headerText = "Tab 1",
                shinyAce::aceEditor("ace_editor_1")
            ),
            shiny.fluent::PivotItem(
                headerText = "Tab 2",
                shinyAce::aceEditor("ace_editor_2"))
        )
        
    ),
    server = function(input, output, session) {
        
    }
)

2. With this second example, it first displays an ace editor, but as soon as we change the PivotItem, the aceEditors inside PivotItems become grey boxes.

library(shiny)
shinyApp(
    ui = fluidPage(
        shiny.fluent::Pivot(
            shiny.fluent::PivotItem(
                headerText = "Tab 1",
                shinyAce::aceEditor("ace_editor_1")
            ),
            shiny.fluent::PivotItem(
                headerText = "Tab 2",
                shinyAce::aceEditor("ace_editor_2"))
        ),
        shinyAce::aceEditor("ace_editor_3")
        
    ),
    server = function(input, output, session) {
        
    }
)

Do you have the same result, when running my code ?

I can't figure out what goes wrong.

Thanks for your help,

Boris Delange

[BorisDelange]

My alternative is :

shinyApp(
    ui = fluidPage(
        
        shinyjs::useShinyjs(),

        shiny.fluent::Pivot(
            onLinkClick = htmlwidgets::JS(paste0("item => Shiny.setInputValue('current_tab', item.props.id)")),
            shiny.fluent::PivotItem(id = "item1", headerText = "Tab 1"),
            shiny.fluent::PivotItem(id = "item2", headerText = "Tab 2")
        ),
        br(),
        shinyAce::aceEditor("ace_editor_1", "First text"),
        shinyjs::hidden(shinyAce::aceEditor("ace_editor_2", "Second text"))

    ),
    server = function(input, output, session) {
        
        observeEvent(input$current_tab, {
            
            if (input$current_tab == "item1"){
                shinyjs::show("ace_editor_1")
                sapply(c("ace_editor_2", "ace_editor_3"), shinyjs::hide)
            }
            else if (input$current_tab == "item2"){
                shinyjs::hide("ace_editor_1")
                sapply(c("ace_editor_2", "ace_editor_3"), shinyjs::show)
            }
        })
    }
)

[jakubsob]

Hi @BorisDelange,

another alternative to overcome this issue would be to do:

library(shiny)
library(shinyAce)
library(shiny.fluent)

shinyApp(
  ui = fluidPage(
    shiny.fluent::Pivot(
      shiny.fluent::PivotItem(
        headerText = "Tab 1",
        uiOutput("ace_editor_ph_1")
      ),
      shiny.fluent::PivotItem(
        headerText = "Tab 2",
        uiOutput("ace_editor_ph_2")
      )
    )
  ),
  server = function(input, output, session) {
    output$ace_editor_ph_1 <- renderUI({
      shinyAce::aceEditor("ace_editor_2", "Text 1")
    })
    
    output$ace_editor_ph_2 <- renderUI({
      shinyAce::aceEditor("ace_editor_2", "Text 2")
    })
  }
)

This behaviour occurs due to the the fact that shiny.react renders renders components using a different mechanism than shiny does. When a component doesn't display properly, using uiOutput and renderUI usually solves the issue.