Auto-resize textAreaInput created through renderUI

问题

I'm trying to get my textAreaInputs to resize so that they display the entire area's contents by default. Following this, auto-resize textAreaInput in shiny R, I can get one to work with a textAreaInput created under ui (as in, the textAreaInput resizes appropriately). I can't get it to work (as in, the textAreaInput does not resize) when creating the textAreaInput as part of renderUI, let alone as part of a module. I'm happy to make use of shinyjs if it's helpful.

The underlying problem here is that I don't understand Javascript.

In both cases, using:

jc <- "document.addEventListener('DOMContentLoaded', function(event) {
    var observe;
if (window.attachEvent) {
observe = function (element, event, handler) {
element.attachEvent('on'+event, handler);
};
}
else {
observe = function (element, event, handler) {
element.addEventListener(event, handler, false);
};
}
function init () {
var text = document.getElementById('text');
function resize () {
text.style.height = 'auto';
text.style.height = text.scrollHeight+'px';
}
/* 0-timeout to get the already changed text */
function delayedResize () {
window.setTimeout(resize, 0);
}
observe(text, 'change',  resize);
observe(text, 'cut',     delayedResize);
observe(text, 'paste',   delayedResize);
observe(text, 'drop',    delayedResize);
observe(text, 'keydown', delayedResize);

text.focus();
text.select();
resize();
};init()
})
"

This, with the textAreaInput created under ui will resize as typed or pasted into:

library(shiny)

ui <- fluidPage(
  shiny::tags$script(jc),
  textAreaInput(inputId = "text", label = "a", value = "b")
  # uiOutput("tai")
)

server <- function(input, output, session) {

  # output$tai <- renderUI({
  #     textAreaInput(inputId = "text", label = "a", value = "b")
  # })
}

shinyApp(ui, server)

while this, with the textAreaInput created in renderUI on the server side, does not resize automatically:

library(shiny)

ui <- fluidPage(
  shiny::tags$script(jc),
  # textAreaInput(inputId = "text", label = "a", value = "b")
  uiOutput("tai")
)

server <- function(input, output, session) {

  output$tai <- renderUI({
      textAreaInput(inputId = "text", label = "a", value = "b")
  })
}

shinyApp(ui, server)

回答1:

You can include a delay by replacing init() with setTimeout(function(){init();}, 500);:

jc <- "document.addEventListener('DOMContentLoaded', function(event) {
  var observe;
  if (window.attachEvent) {
    observe = function (element, event, handler) {
      element.attachEvent('on'+event, handler);
    };
  } else {
    observe = function (element, event, handler) {
      element.addEventListener(event, handler, false);
    };
  }
  function init () {
    var text = document.getElementById('text');
    function resize () {
      text.style.height = 'auto';
      text.style.height = text.scrollHeight+'px';
    }
    /* 0-timeout to get the already changed text */
    function delayedResize () {
      window.setTimeout(resize, 0);
    }
    observe(text, 'change',  resize);
    observe(text, 'cut',     delayedResize);
    observe(text, 'paste',   delayedResize);
    observe(text, 'drop',    delayedResize);
    observe(text, 'keydown', delayedResize);

    text.focus();
    text.select();
    resize();
  };
  setTimeout(function(){init();}, 500);
})
"

来源：https://stackoverflow.com/questions/59515872/auto-resize-textareainput-created-through-renderui

标签

javascript

Shiny

shinyjs