R Shiny： textAreaInputのリサイズのバグ

2019.07.17

R ShinyのtextAreaInputはフリー形式でのテキスト入力を行うためのUIパーツです。BOXのリサイズができるので入力文字数が多いような（例えばコメント欄）の
目的に使いやすいコントロールです。今回はこのtextAreaInputについてご紹介します。

私の仕事のドメインである分析用のアプリを作る上ではあまりこのパーツを使う機会はないのですが、先日、分析中の作業コメントを残すためのUIを作り込む過程でこのパーツを
組み込んでみました。

その際にどうも入力BOXのサイズ調整がうまくいかない点があったので調べてみたところバグであることがわかりました。
本日はその内容と対応方法について紹介します。

文法の確認

まずはtextAreaInputの基本文法の確認です。

textAreaInput(inputId, label, value = "", width = NULL,
height = NULL, cols = NULL, rows = NULL, placeholder = NULL,
resize = NULL)

inputId :（必須）このインプットUIのIDを指定します。

label : （必須）このインプットIDの上に表示されるラベルです。表示しないときは label =""とします。

value : 初期値

width : このインプットUIの幅です。400pxや 100%で指定します。

height : このインプットUIの高さです。400pxや 100%で指定します。

cols : このインプットUIに可視表示される一行の文字数です、例えば、80と指定します。widthと一緒に使われた場合にはwidthが優先されます。

rows : このインプットUIに可視表示される列数です、例えば、6と指定します。heightと一緒に使われた場合にはheightが優先されます。

placeholder : このインプットUIの入力BOXにヒントとしてあらかじめ表示される文字を指定します。

resize : どの方向へのリサイズを許すかを指定します。 "both", "none", "vertical", "horizontal".のうちどれかを指定します。
初期値はNULL (resize="")で、この場合はブラウザーの初期設定に依存した動きとなります。

では続いて簡単なサンプルコードを使って説明します。Shinyのリファレンスに掲載されている
サンプルを多少修正して掲載しています。

なお参考として、textInputコントロールも並列に掲載しています。

textInput(inputId, label, value = "", width = NULL, placeholder = NULL)

この
なお参考として、textInputコントロールは、textAreaInputのシンプル版といえるもので、一行だけの入力BOXでリサイズができないなどかなりシンプルな作りになっています。

サンプルプログラム

library(shiny)
ui <- fluidPage(
column(width=6,
textAreaInput(inputId = "caption", label = "Caption", value = "Data1", width = "50%"),
verbatimTextOutput("value"),
br(),
textInput(inputId = "caption2", label = "Caption2", value = "Data2", width = '50%'),
verbatimTextOutput("value2")
)
)
server <- function(input, output) {
output$value <- renderText({ input$caption })
output$value2 <- renderText({ input$caption2 })
}
shinyApp(ui, server)

このコードをコピペして実行すると以下のように表示されます。これがかなり違和感があります。

f:id:okdata:20190716235010p:plain

textAreaInputテキストの入力BOXがtextInputに比べてかなり小さくなってしまっていますね。width = "50%"で指定していますから画面の半分の幅の入力BOXが
出て来るはずですが、小さくなってしまっています。

また別の問題として、textAreaInputの特徴として入力BOXの右下のつまみをドラッグするとBOXがリサイズできるはずですが、現在ではコンテナの(columnで指定した幅の）範囲外までドラッグできてしまいます。

解決策

いろいろと検索していたら、やはり困っている人はいるようで、解決策を発見したのでご紹介します。

元ネタはここを参考にさせていただきました。

このページにある、textAreaInput2関数を使えばすっきりと解決できます。

textAreaInput2 <- function (inputId, label, value = "", width = NULL, height = NULL,
cols = NULL, rows = NULL, placeholder = NULL, resize = NULL)
{ ... }

上記サンプルプログラムのtextAreaInput(...),をtextAreaInput2(...),に差し替えて再度実行してください。

f:id:okdata:20190717002352p:plain

上記のような形で想定通り出力されました。また、リサイズの幅が制限できない問題も解決できています。

この件に関しては以上です。
RStudioでShiny自体のバージョンアップで早期にFIXされることを望みます。