let size argument control dcc.Input of non-text types as well?

[jwhendy]

I'm using some dcc.Input elements in an app and would like the size of the box to be smaller. It should contain numbers, so my intuition was to use type='number', but to my surprise I found I couldn't seem to control the width like with type='text'. From the docs it seems this might be expected, though the bold part below is unclear and reads like it might not have been completed:

size
The initial size of the control. This value is in pixels unless the value of the type attribute is text or password, in which case it is an integer number of characters. Starting in [starting in what?], this attribute applies only when the type attribute is set to text, search, tel, url, email, or password, otherwise it is ignored.

In my case, I like the number type as it prevents the user from entering text, but I only need it to hold 2-3 digits so I'd like it small so I can place side by side with another field.

Would you advise I use type='text' and try the pattern argument to ensure it's only digits? I haven't tried this yet, but I'm guessing I can do something like [0-9]{1,3} or something. Per #160 I'm now thinking the type argument is purely to apply some checks to the input field, not to affect the return type in any way, so number vs. text is only advantageous to me with respect to not taking in strings.

If it would be considered valuable, I personally vote that size should just apply to all dcc.Input types.

Thanks!

[jwhendy]

I found an example of validating an <input> with a pattern argument, but it does it only when I click the submit button. I don't know the analog to use in dash for this sort of effect.

I'm also not having any luck figuring out how/why the size argument shouldn't/can't/doesn't apply to type='number', which looks to be a part of react.js?

P.S. In hindsight, I think I should have filed this at dash-core-components. Sorry about that and feel free to move, or I can re-file over there.

[chriddyp]

Thanks for reporting @jwhendy !

Here's some context: the dcc.Input arguments are directly the HTML attributes, so size is referring to the default HTML attribute size. Also, all of the descriptions about these properties are scraped directly from the MDN documentation here: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input. In particular, the latest section on size:

size
The initial size of the control. This value is in pixels unless the value of the type attribute is text or password, in which case it is an integer number of characters. Starting in HTML5, this attribute applies only when the type attribute is set to text, search, tel, url, email, or password, otherwise it is ignored. In addition, the size must be greater than zero. If you do not specify a size, a default value of 20 is used. HTML5 simply states "the user agent should ensure that at least that many characters are visible", but different characters can have different widths in certain fonts. In some browsers, a certain string with x characters will not be entirely visible even if size is defined to at least x.

Now, HTML is pretty idiosyncratic - sometimes these attributes work differently on different browsers (for example, type='date' has a really nice little date picker UI on chrome but nothing on safari) and they all have to be backwards compatible since the start of HTML!

I'd rather not override the behaviour of these properties like size as I don't want to get out-of-sync with the HTML spec nor have the dash HTML components like dcc.Input behave differently than the HTML <input/> tag itself.

---

For this particular use case, I recommend passing in style and setting the CSS attribute width and height i.e.:

dcc.Input(style={'width': 80}, type='number', value=5)

I'll close this issue with that solution but feel free to reopen if this isn't working as you would like it.

[jwhendy]

Thanks @chriddyp ! I ended up stumbling on this as well. It definitely did not dawn on me initially to use raw html styles, so thanks for the tip...

It seems all the valuable lessons happen when running into some oddity and having to struggle a bit. Now it will be fresher in my mind to look at using html itself when an argument doesn't do what I want :)

Thanks again!