Bug: hideFeedback overwrites width and height from textAreaInput

[fkoh111]

Hello,

Thank you for a cool package with a good API.

However, I noticed that hideFeedback is overwriting width and height as defined in textAreaInput().

Reprex:

library(shiny)
library(shinyFeedback)

ui <- fluidPage(
  shinyFeedback::useShinyFeedback(),
  
  textAreaInput(inputId = "txtArea",
                label = "Text Area",
                value = "...",
                width = "400px",
                height = "300px")
)

server <- function(input, output, session) {
  observeEvent(input$txtArea, {
    
    if (nchar(input$txtArea) > 3) {
      showFeedbackWarning(
        inputId = "txtArea",
        text = "too many chars",
        icon = NULL
      )
    } else {
      hideFeedback(inputId =  "txtArea")
    }
  })
  
}

shinyApp(ui = ui, server = server)

The first time I invoked this, I expected that the textAreaInput would have a width and height of 400px x 300px. Instead the textAreaInput seems to fallback on the default width and height.
If I remove the invocation of hideFeedback in else clause then I will lose reactivity. See reprex below.

library(shiny)
library(shinyFeedback)

ui <- fluidPage(
  shinyFeedback::useShinyFeedback(),
  
  textAreaInput(inputId = "txtArea",
                label = "Text Area",
                value = "...",
                width = "400px",
                height = "300px")
)

server <- function(input, output, session) {
  observeEvent(input$txtArea, {
    
    if (nchar(input$txtArea) > 3) {
      showFeedbackWarning(
        inputId = "txtArea",
        text = "too many chars",
        icon = NULL
      )
    }
  })
  
}

shinyApp(ui = ui, server = server)

Please let me know if I can assist :-)

[phoward38]

Hi @fkoh111,

We're glad you've enjoyed the package!

Thanks for pointing this out. I've found the source of the issue & will update the master branch once we've confirmed the fix & tested. In the meantime, you can install the bug/textAreaStyle branch which resolves the issue in your reprex.

[merlinoa]

Thanks @fkoh111 for reporting this issue and including a repex!

And thanks @phoward38 for the fix!

The fix had been merged with master, so closing this issue out. Please reopen if you are still experiencing issues.

[fkoh111]

Great stuff. Just tried out the feature branch for this issue and its good :-).
Minor thing though: you should probably be aware that the feedback icon is now somewhat floating. A minor work around is obviously to set icon to null - as what I did in the reprex.

[merlinoa]

Yep thanks @fkoh111 . We will work on a fix for the floating icon, but it's going to be a little more involved than this last update, so it may be a while before we get to it. Until then, please just set the icon to NULL as you did in your reprex when using custom width textAreaInputs.

[merlinoa]

We just merged a great PR by @phoward38 5d292d8 to fix the floating icon issue for the textAreaInput. Thanks @fkoh111 for bringing this issue to our attention as well as the original width/height problem!

[phoward38]

• Make this more robust
  • Reprex: polished_hosted Email Body textAreaInput
    • Formatted correctly w/ no width args & no feedback
    • Formatted incorrectly unless width = '100%' & tagAppendAttributes(style = 'width: 100%;') included
• NOTE: Occurs b/c initial textAreaInput is empty, so 100% width is 0px. Then, the updateTextAreaInput adds the text, but the width doesn't update
  • Confirm this is feedback bug, not just textAreaInput update behavior

[earnaud]

Hello,

I am having troubles with this (amazing !) package: here is my textAreaInput:

textAreaInput(
              ns("attributeDefinition"), 
              "Description of the attribute",
              value = "!Add description here!"
            ) %>%
              shiny::tagAppendAttributes(style = 'width: 100%;')

and here is a bit of code managing its feedback:

# Function definition -- used within an observeEvent, works as expected
checkFeedback <- function(
  input, id, condition = NULL, silent = FALSE, type = c("danger", "warning"), text = NULL
) {
  if(isFALSE(is.character(type) && type %in% c("danger", "warning")))
    type = "danger"
  else 
    type = type[1]
  
  shinyFeedback::hideFeedback(id)
  
  if(is.null(condition)) 
    condition <- isTruthy(input[[id]])
  
  if(condition) {
    shinyFeedback::showFeedbackSuccess(id)
  } else if(isFALSE(silent)) {
    if(type == "danger")
      shinyFeedback::showFeedbackDanger(id, text = text)
    if(type == "warning")
      shinyFeedback::showFeedbackWarning(id, text = text)
  }
  
  return(condition)
}

However, textAreaInput displays with width equal to 0 BUT with content inside.

[merlinoa]

@earnaud what version of shinyFeedback are you using? This should have been fixed in the 0.3.0 CRAN release, and in the current GitHub version. Let me know if it is not fixed in either of these versions, and I will look into it in more detail. Thanks

[earnaud]

I am under the version 0.3.0. And I still get the issue with the github version.
Please note that I am using a lot of packages in a large shiny app. The bug might be caused by something else. But there are lots of hints in this current issue matching the description of my bug.

EDIT

Here is the full HTML tag:

<div class="form-group shiny-input-container has-feedback" style="width: 57px;">
    <label class="control-label" id="fill-Attributes-attributeDefinition-label" for="fill-Attributes-attributeDefinition" style="color: rgb(92, 184, 92);">Description of the attribute</label>
    <textarea id="fill-Attributes-attributeDefinition" class="form-control shinyjs-resettable shiny-bound-input" style="border: 1px solid rgb(92, 184, 92); margin: 0px;" data-shinyjs-resettable-id="fill-Attributes-attributeDefinition" data-shinyjs-resettable-type="TextArea" data-shinyjs-resettable-value="!Add description here!" aria-live="polite">!Add description here!</textarea>
   <span id="fill-Attributes-attributeDefinition-icon" class="form-control-feedback" style="color: #5cb85c;">
      <i class="glyphicon glyphicon-ok" role="presentation" aria-label="ok icon"></i>
   </span>
</div>

A weird behavior (maybe related?) is that the shown value above is "!Add description here!" but the shown value in the GUI is different (updated by a updateTextAreaInput() )

Also, changing the width to "300px" does not change the result.