0

I need a text input which field adjusts its size to the text that is entered by the user. Neither textInput nor textAreaInput works. Therefore, I wrote the following:

library(shiny)

textInput2 <- function(inputId, label, value = "") 
{
  tagList(
    p(style = 'font-weight: bold; margin-bottom: 4px;', label),

    div(class = 'divInput', style = 'border: 1px solid silver; border-radius: 6px; padding: 5px;',
      div(id              = inputId,
          class           = "input",
          type            = "text",
          style           = "border: 0; outline: 0; min-height: 22px; padding-left: 7px;",
          role            = "textbox",
          contenteditable = TRUE, 
          value)
         )
  )
}

ui <- fluidPage(
  style = 'width: 200px;',
  textInput2('ip123', 'Label', 'xxx'),
)

server <- function(input, output, session)
{
  observe(
    print(input$ip123)
  )
}

shinyApp(ui = ui, server = server)

The input field nicely adapts its size to the content entered by the user. But alas, I cannot get the content of the div. I understand that 'ip123' is not the id of a real input, therefore the 'observe' function does not work.

I looked at: get the text content from a contenteditable div through javascript

but I am puzzled how to integrate this in the Shiny code.

Any responses are greatly appreciated.

Ronak Shah
  • 377,200
  • 20
  • 156
  • 213
WJH
  • 539
  • 5
  • 14
  • Does [this](https://stackoverflow.com/questions/59365261/auto-resize-textareainput-in-shiny-r) help? – Limey Mar 01 '21 at 18:20
  • Yes, surely it does! – WJH Mar 01 '21 at 20:39
  • 3
    Does this answer your question? [auto-resize textAreaInput in shiny R](https://stackoverflow.com/questions/59365261/auto-resize-textareainput-in-shiny-r) – Limey Mar 02 '21 at 10:06
  • Yes, it solved the problem, thanks! I added only `rows = 1` in the `textAreaInput` command, and in the JavaScript code I added `text.style.overflow = 'hidden';` at the end of the function `init`. – WJH Mar 02 '21 at 13:13
  • It only does not work when `textAreaInput` is put inside `modalDialog'. – WJH Mar 02 '21 at 14:36

0 Answers0