Limiting input with {:field :numeric} to

[kishanov]

Hi there,

I've noticed that [:input {:field :numeric}] generates <input type="text">. This is OK, but when I try to limit the input to specific range (let's say 1..65536) there is somewhat strange behavior:

• providing {:min 1 :max 65536} generates <input type="text" min="1" max="65536"> which I believe only works for `
• providing {:maxsize 5 :size 5} doesn't generate corresponding HTML tags at all
• After entering more than 18 characters into input field the behavior becomes quite entertaining: first it converts the number to exponent format, then the number is replaced with "Infinity" string

Is there a reliable way to make input field accept only N characters at max OR maximum input number?

[kishanov]

After some research I've found the solution and I'll close the issue, but I'd like to outline the solution for posterity.

Basically {:maxLength 5} is working (notice capital 'L'), while {:maxlength 5} is not. According to react doc (https://facebook.github.io/react/docs/tags-and-attributes.html) capitalization matters. However, the result is compiled into lowercase "maxlength" (can be observed through developer tools)

[yogthos]

As a note you should also be able to use Clojure idiomatic :max-length as well and Reagent is smart enough to handle it.

[kishanov]

Dmitri, thanks for the hint.

Just out of curiosity, what is the justification for generating <input type="text"> for {:field :numeric} and not <input type="number">?

[yogthos]

As I recall, when I tested with some older IE versions I got better results with type text, so I decided to go with it for compatibility reasons.