NumericInput min, max values disrespect on keyboard-input

[user11287]

I know this issue was opened before, but I still think this is a rather mixed and curois behaviour. When I have inside a shiny app just one numericInput panel and nothing else, if I try to write integer bigger than max I get an error message (in Chrome).

       shinyUI(pageWithSidebar(
           headerPanel('Download Example'),
           sidebarPanel(
             numericInput("n", "N:", min = 0, max = 100, value = 50)
           ),
           mainPanel()
       ))

But if I have something else before the numericInput, that error message no longer appears.

library(shiny)

      shinyUI(pageWithSidebar(
       headerPanel('Download Example'),
       sidebarPanel(
          sliderInput("sampSize", "Sample Size",min = 2, max = 20,  step = 2,  value = 10),
             numericInput("n", "N:", min = 0, max = 100, value = 50)
          ),
          mainPanel()
      ))

On other browsers it also doesn't appear. Is this a desirev behaviour or strange outcome?

[bborgesr]

Here's what I get with the first chunk of code:

library(shiny)

ui <-  pageWithSidebar(
  headerPanel('Download Example'),
  sidebarPanel(
    numericInput("n", "N:", min = 0, max = 100, value = 50)
  ),
  mainPanel()
)

server <- function(input, output, session) {
}

shinyApp(ui, server)

Chrome:

Firefox:

Safari (nothing):

[bborgesr]

It's pretty mysterious that if you run instead the second chunk of code (i.e. put a slider input before the numeric input), the messages disappear... Looking into it.

library(shiny)

ui <-  pageWithSidebar(
  headerPanel('Download Example'),
  sidebarPanel(
    sliderInput("sampSize", "Sample Size",min = 2, max = 20,  step = 2,  value = 10),
    numericInput("n", "N:", min = 0, max = 100, value = 50)
  ),
  mainPanel()
)

server <- function(input, output, session) {
}

shinyApp(ui, server)

[bborgesr]

Also interesting is that this does not happen when we have a more stripped-down page. E.g. the following app does not result in any tooltips or pop overs:

library(shiny)

ui <- fluidPage(
  numericInput("n", "N:", min = 0, max = 100, value = 50)
)

server <- function(input, output, session) {}
shinyApp(ui, server)

[bborgesr]

Take a look at cleave JS library: https://nosir.github.io/cleave.js/. (Recentely implemented for Shiny by @carlganz here)

[albertosantini]

@bborgesr it works as expected. :)

TLDR;

I prepared the following html snippet to reproduce a few use cases.

<p>Type 100 and press Enter</p>
<br/>

<form>
  <p>Form with one input: it displays the native validation popup</p>
  <input type="number" max="99" />
</form>
<br/>

<form>
  <p>Form with two inputs and without submit: it doesn't display the native validation popup</p>
  <input type="number" max="99" />
  <input type="number" max="99" />
</form>
<br/>

<form>
  <p>Form with submit: it displays the native validation popup</p>
  <input type="number" max="99" />
  <input type="number" max="99" />
  <button type="submit">Submit</button>
</form>
<br/>

<div>
  <p>Input without form: it doesn't display the native validation popup</p>
  <input type="number" max="99" />
 </div>
<br/>

The rule is the following one: there is no way to trigger the native tooltips other than submitting the form. As stated in W3C Specs, when there is only one single-line text input field in a form, the user agent should accept Enter in that field as a request to submit the form.

Back to the shiny examples.

This snippet displays correctly the native validation tooltip (W3C 8.2, see above):

  sidebarPanel(
    numericInput("n", "N:", min = 0, max = 100, value = 50)
  ),

This snippet doesn't display correctly the native validation tooltip, because there is not a submit button (or input):

  sidebarPanel(
    sliderInput("sampSize", "Sample Size",min = 2, max = 20,  step = 2,  value = 10),
    numericInput("n", "N:", min = 0, max = 100, value = 50)
  ),

This snippet doesn't display correctly the native validation tooltip, because one single-line text input field
is not contained in form tag (inspect the elements with the debugger):

ui <- fluidPage(
  numericInput("n", "N:", min = 0, max = 100, value = 50)
)

So I tried to add a submit button, but the native validation tooltip is not displayed.

  sidebarPanel(
    numericInput("n", "N:", min = 0, max = 100, value = 50),    
    numericInput("n", "N:", min = 0, max = 100, value = 50),
    submitButton("Submit")
  ),

This is a bug and it is due to the preventDefault call in 'input[type="submit"], button[type="submit"]' handler:

shiny/srcjs/init_shiny.js

Line 91 in a0b917a

event.preventDefault();

I would modify that code adding checkValidity statement:

    $('input[type="submit"], button[type="submit"]').each(function () {
      // If there is a submit button on the page, use defer decorator
      inputs = inputsDefer;
      $(this).click(function (event) {
        if ($(this.form)[0].checkValidity()) {
          event.preventDefault();
        }
        inputsDefer.submit();
      });
    });

If it makes sense, I would prepare a PR with the above change, closing this issue.

About the use of an external lib to improve the client validation, I suggest to open a new issue to collect feedbacks, comments and suggestions.