diff --git a/NEWS.md b/NEWS.md index ae8d83c..abea5a2 100644 --- a/NEWS.md +++ b/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 diff --git a/README.md b/README.md index 2f55581..00fdcf5 100644 --- a/README.md +++ b/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) ) }) diff --git a/e2e_tests/.gitignore b/e2e_tests/.gitignore index c2658d7..72748bd 100644 --- a/e2e_tests/.gitignore +++ b/e2e_tests/.gitignore @@ -1 +1,3 @@ node_modules/ +cypress/screenshots/ +cypress/videos/ diff --git a/e2e_tests/cypress/e2e/spec.cy.js b/e2e_tests/cypress/e2e/spec.cy.js index c4855d5..42dce01 100644 --- a/e2e_tests/cypress/e2e/spec.cy.js +++ b/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}'); + }); + }) + \ No newline at end of file diff --git a/e2e_tests/package.json b/e2e_tests/package.json index 2190437..2bbdf6d 100644 --- a/e2e_tests/package.json +++ b/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", diff --git a/inst/assets/js/reactable-extras.js b/inst/assets/js/reactable-extras.js index 0d51cbc..606f139 100644 --- a/inst/assets/js/reactable-extras.js +++ b/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 } ) }; diff --git a/inst/examples/demo/reactable-inputs/app.R b/inst/examples/demo/reactable-inputs/app.R index 2cf6aef..0392516 100644 --- a/inst/examples/demo/reactable-inputs/app.R +++ b/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) + ) + }) } )