27.on blur event

NEWS.md

@@ -1,5 +1,6 @@
 # reactable.extras (development version)
 
+* `text_extra` now allows to listen to the `onBlur` event
 # reactable.extras 0.1.0.9000
 
 ## Server-Side Processing

README.md

@@ -136,7 +136,8 @@ shinyApp(
     textOutput("button_text"),
     textOutput("check_text"),
     textOutput("dropdown_text"),
-    textOutput("text")
+    textOutput("text_text"),
+    textOutput("text_on_blur")
   ),
   server = function(input, output) {
     output$react <- renderReactable({
@@ -209,11 +210,20 @@ shinyApp(
       )
     })
 
-    output$text <- renderText({
+    output$text_text <- renderText({
       req(input$text)
       values <- input$text
       paste0(
-        "Dropdown: ",
+        "Text: ",
+        string_list(values)
+      )
+    })
+
+    output$text_on_blur <- renderText({
+      req(input$text_blur)
+      values <- input$text_blur
+      paste0(
+        "Text on blur: ",
         string_list(values)
       )
     })

e2e_tests/.gitignore

@@ -1 +1,3 @@
 node_modules/
+cypress/screenshots/
+cypress/videos/

e2e_tests/cypress/e2e/spec.cy.js

@@ -25,3 +25,15 @@ describe('Date in reactable passes values to the shiny', () => {
   });
 })
 
+// test for checking text input inside the reactable
+describe('Text Extra passes values to the Shiny App', () => {
+    it('TextExtra', () => {
+      cy.visit('http://localhost:8888');
+      cy.get('.text-extra').eq(1).clear().type('new_value').should('have.value', 'new_value');
+      cy.contains('Text: {row : id_2, value : new_value, column : Model}');
+      // Click on body to trigger onBlur event
+      cy.get('body').click();
+      cy.contains('Text OnBlur: {row : id_2, value : new_value, column : Model}');
+    });
+  })
+

e2e_tests/package.json

@@ -3,7 +3,7 @@
   "version": "0.0.1",
   "description": "For running cypress tests",
   "scripts": {
-    "start-test-app": "cd ../inst/examples/demo/reactable-inputs && Rscript -e 'shiny::runApp(port=8888)'",
+    "start-test-app": "cd ../inst/examples/demo/reactable-inputs && Rscript -e 'devtools::load_all(); shiny::runApp(port=8888)'",
     "e2e-test": "start-server-and-test start-test-app http://localhost:8888 'cypress run --record false'"
   },
   "main": "index.js",

inst/assets/js/reactable-extras.js

@@ -46,9 +46,13 @@ function textExtras ({ id, value, uuid, column, page, className, children }) {
     Shiny.setInputValue(id, { row: uuid, value: event.target.value, column: column }, { priority: 'event' })
   }
 
+  const onBlur = event => {
+    Shiny.setInputValue(`${id}_blur`, { row: uuid, value: event.target.value, column: column }, { priority: 'event' })
+  }
+
   return React.createElement(
     'input',
-    { onInput, className, defaultValue: value, key: uuid }
+    { onInput, onBlur, className, defaultValue: value, key: uuid }
   )
 };
 

inst/examples/demo/reactable-inputs/app.R

@@ -26,7 +26,8 @@ shinyApp(
     textOutput("button_text"),
     textOutput("check_text"),
     textOutput("dropdown_text"),
-    textOutput("text")
+    textOutput("text"),
+    textOutput("text_on_blur")
   ),
   server = function(input, output) {
     df <- MASS::Cars93[, 1:4] |>
@@ -73,7 +74,8 @@ shinyApp(
           Model = colDef(
             cell = text_extra(
               "text",
-              key = "id_row"
+              key = "id_row",
+              class = "text-extra"
             )
           )
         )
@@ -142,5 +144,24 @@ shinyApp(
         string_list(values)
       )
     })
+
+    output$text_on_blur <- renderText({
+      req(input$text_blur)
+      values <- input$text_blur
+      updateReactable(
+        "react",
+        data = update_table(
+          df,
+          values$row,
+          values$column,
+          values$value,
+          key_column = "id_row"
+        )
+      )
+      paste0(
+        "Text OnBlur: ",
+        string_list(values)
+      ) 
+    })
   }
 )