[Porting] TagInput + example

NAMESPACE

@@ -65,6 +65,8 @@ export(Tab)
 export(Tabs)
 export(TabsExpander)
 export(Tag)
+export(TagInput)
+export(TagInput.shinyInput)
 export(Text)
 export(TextArea)
 export(TextArea.shinyInput)

R/components.R

@@ -497,7 +497,18 @@ InputGroup <- component("InputGroup")
 #' @export
 InputGroup.shinyInput <- input("InputGroup", "") # nolint
 
-# TODO: Tag input
+#' TagInput
+#'
+#' Documentation: <https://blueprintjs.com/docs/#core/components/tag-input>
+#'
+#' @example inst/examples/components/TagInput.R
+#' @inherit template params
+#' @export
+TagInput <- component("TagInput")
+
+#' @rdname TagInput
+#' @export
+TagInput.shinyInput <- input("TagInput", c()) # nolint
 
 #' Text area
 #'

inst/examples/components/TagInput.R

@@ -0,0 +1,16 @@
+library(shiny)
+library(appsilon.blueprint)
+
+if (interactive()) shinyApp(
+  # TagInput must be controlled
+  ui = tagList(
+    TagInput.shinyInput(
+      inputId = "controlledTagInput",
+      value = c("one", "two", "three")
+    ),
+    textOutput("controlledTagInputOutput")
+  ),
+  server = function(input, output) {
+    output$controlledTagInputOutput <- renderText(input$controlledTagInput)
+  }
+)

js/src/inputs.jsx

@@ -54,6 +54,11 @@ export const InputGroup = InputAdapter(Blueprint.InputGroup, (value, setValue) =
   onChange: (event) => setValue(event.target.value),
 }));
 
+export const TagInput = InputAdapter(Blueprint.TagInput, (values, setValue) => ({
+  values,
+  onChange: setValue,
+}));
+
 export const TextArea = InputAdapter(Blueprint.TextArea, (value, setValue) => ({
   value,
   onChange: (event) => setValue(event.target.value),