Skip to content

onLinkClick in Pivot Not Functioning Correctly When Inside fluentPage #164

Closed

Description

@justacec

Steps to reproduce

  1. Enter the following code into an R session:
library(shiny)
library(shiny.fluent)

shinyApp(
  ui = fluentPage(
    textOutput("text"),
    Pivot(
      onLinkClick = JS('alert("Here")'),
      PivotItem(id = "tab1", headerText = "Apples"),
      PivotItem(id = "tab2", headerText = "Bananas")
    )
  ),
  server = function(input, output) {
  }
)

Bug description

The JS alert code is fired when the page is rendered and is not fired as expected when the user clicks on the PivotItem links.

Expected behavior

The JS code would fire each time the user changes to a different PivotItem

Comments

If the call to fluentPage is replaced with a tagList call, then the JS code executes as expected.

Relevant software versions:
R: 4.2.0
Shiny: 1.7.3
shiny.fluent: 0.3.0

Activity

  1. jakubsob commented on Mar 9, 2023

    @jakubsob
    Contributor

    Hi @justacec,

    this is not a bug. onLinkClick is a prop that should be a function. Please take a look at the docs of this component.

    image

    Please take a look at this example:

    library(shiny)
    library(shiny.fluent)
    
    shinyApp(
      ui = tagList(
        textOutput("text"),
        Pivot(
          onLinkClick = JS('() => alert("Here")'),
          PivotItem(id = "tab1", headerText = "Apples"),
          PivotItem(id = "tab2", headerText = "Bananas")
        )
      ),
      server = function(input, output) {
      }
    )

    Converting the JS code passed to onLinkClick argument to a function should solve this issue. It works with both fluentPage and tagList.

  2. locked and limited conversation to collaborators on Mar 9, 2023
  3. converted this issue into a discussion #167 on Mar 9, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions