onChange JavaScript for TextField.shinyInput

[kyle-power]

Hello hello! @marekrogala @anirbanshaw24

I'm trying to implement some DOM JavaScript to TextField.shinyInput that will automatically capitalize the user input. For example, if the user types "abc", the text will appear in both the UI and Server as "ABC". I've been stuck for a few hours now trying to implement with JS() unsuccessfully.

I found some examples online, react specific and plain, but I haven't been able to get it working.

Any suggestions or pointers to get me in the right direction? Thanks!

[jakubsob]

Hello @kyle-power, thanks for reaching out. A solution I found to be the most straightforward to implement is to use both CSS and server-side processing:

library(shiny)
library(shiny.fluent)

ui <- fluentPage(
  TextField.shinyInput("textInput", style = "text-transform: uppercase"),
  textOutput("textOutput")
)

server <- function(input, output, session) {
  output$textOutput <- renderText({
    toupper(input$textInput)
  })
}

shinyApp(ui = ui, server = server)

The value on the browser side isn't uppercase, so unless you want to access uppercase value from JS, this solution could be sufficient. But even then you could make uppercase from within JS. Would this solution work for you?

[anirbanshaw24]

Hi @kyle-power. Jakub's solution is awesome. Hope it has solved your issue.
But I was still wondering why you would need the capitalized input on ui.R?
Is it to use that input in other inputs. For example, I want to generate a dropdown list based on the input already provided.
In this case, I dont think it is possible on the ui.R at all. Instead you have to put the input code in server. Like this:

library(shiny)
library(shiny.fluent)

ui <- fluentPage(TextField.shinyInput("textInput"),
                 textOutput("textOutput"),
                 br(),
                 uiOutput("server_ui"))

server <- function(input, output, session) {
  output$textOutput <- renderText({
    input$textInput
  })
 
  observe({
    updateTextField.shinyInput(session,
                               "textInput",
                               value = toupper(input$textInput))
  })
  
  output$server_ui <- renderUI({
     PrimaryButton.shinyInput("button", text = input$textInput)
  })  
}

shinyApp(ui = ui, server = server)

Here the action button's text is generated using the input from the text box.
Please let us know if this is the intended use you are talking about. Else it will be helpful if you elaborate a little more on what you are trying to achieve.

[kyle-power]

Hey @anirbanshaw24 and @jakubsob

I tried implementing this with your suggested observeEvent() and updateTextField.shinyInput(), but there seems to be some performance issues. When typing text into the field, there is a significant lag issue where if you type to fast, the update overwrites new letters.

It's not completely necessary for the text to be rendered with uppercase letters in the UI, but the Server requires uppercase letters as the input is used in a filter() and is case-sensitive. That's why my first instinct was to use onChange javascript with the element - but I still haven't been able to find a solution. In the meantime, I can just use toupper(input$text) on the server side before computing any operations, but I would really prefer to have a one-step solution where the text is automatically converted to uppercase in both the UI and Server without multiple CSS and observe operations.

Any thoughts?

[marekrogala]

Hey @kyle-power, thanks for more details. Perhaps there is some debouncing needed. A large part of our team is on vacation, so we'll need a bit more time to address this, but as soon as we can we'll dive into this issue and propose a solution - I think within 2 weeks from now. (cc @kamilzyla)

[kamilzyla]

Hey @kyle-power! This thread is somewhat old, but I thought it might be still useful to add something here.

In general, with .shinyInput() wrappers you won't be able to use the onChange, value and defaultValue props as defined by the component (sometimes called differently, e.g. checked and defaultChecked). These are replaced by the the .shinyInput() wrapper with its own inputId and value props.

In this case you are asking for a fully browser-side transformation of the value. Unfortunately all solutions I can think of will be either somewhat hacky (the workarounds provided here) or complex. See below for a "proper", but complex solution:

library(shiny.fluent)

CustomComponents <- tags$script(HTML("(function() {
  const { InputAdapter } = jsmodule['@/shiny.react'];
  const { TextField } = jsmodule['@fluentui/react'];
  const CustomComponents = jsmodule['CustomComponents'] = {};

  CustomComponents.UpperCaseTextField = InputAdapter(TextField, (value, setValue) => ({
    value: value.toUpperCase(),
    onChange: (e, v) => setValue(v.toUpperCase()),
  }));
})();"))

UpperCaseTextField <- function(inputId, ..., value = "") shiny.react::reactElement(
  module = "CustomComponents",
  name = "UpperCaseTextField",
  props = shiny.react::asProps(inputId = inputId, ..., value = value),
  deps = shiny.fluent::shinyFluentDependency()
)

shinyApp(
  ui = tagList(
    CustomComponents,
    UpperCaseTextField("text"),
    textOutput("text")
  ),
  server = function(input, output) {
    output$text <- renderText(input$text)
  }
)

[kyle-power]

Thanks, @kamilzyla !
the intricacies of shiny.fluent are not always intuitive, so i wouldn't have guessed that we couldn't use the onChange attribute upfront.
the minor complexities make sense here with the js function, and i find it to be a perfect solution for a fully browser-side transformation.
this is also a great learning exercise for any other js function that i would want/need to apply to the fluent object.

Cheer!