Issue

[edouardbrasier]

Hello

When I look at the demo page it doesn't look the same in Chrome and Firefox
http://vlad-ignatov.github.io/react-numeric-input/examples/v2.0.5/index.html
In Chrome it isn't a spinbox

[edouardbrasier]

Here is a screenshot with Chrome it it isn't a spinbox
https://drive.google.com/file/d/0BzXG4U5w5wqTYkc5YlFuNFg3Tmc/view?usp=sharing

[vlad-ignatov]

That link is now outdated. It should be http://vlad-ignatov.github.io/react-numeric-input/examples/v2.0.7/index.html (note the version number).

However, that shouldn't be related to your issue. Can you tell what !!document.ontouchstart evaluates to in your browser? The result shouldn't be true.

And what about the "Mobile Version / Interactive example" on the same page? Does that work?

[edouardbrasier]

Thanks
Custom style and interactive example on the same page do work in the sense they correctly show spin boxes.

"Can you tell what !!document.ontouchstart evaluates to in your browser? The result shouldn't be true."

I am fairly new. How do I do that?

Cheers

[vlad-ignatov]

In Chrome you can go to View/Developer/Javascript Console. The console will open at the bottom of the page. Paste !!document.ontouchstart there, hit Enter and the result will be displayed below.

In Firefox it is similar but the console is located (on my Mac) at Tools/Web Developer/Web Console.

P.S. Make sure you are doing that while viewing the http://vlad-ignatov.github.io/react-numeric-input/examples/v2.0.7/index.html page.

[edouardbrasier]

Thanks.
Both Chrome and Firefox returns false
But Firefox shows spin box

[edouardbrasier]

Also I have just tested the toggle and it works on all browsers including edge.
The initial load is also fine on Chrome. It shows spin box by default. However the example above shows + and -

[vlad-ignatov]

Then I guess 'ontouchstart' in document is true? This does not make sense, unless off course you are on touch screen. If you do have a touch screen, then this is how it's supposed to work.
If you want to change it you can pass mobile={false} or mobile={myFunc} where myFunc is a function that will decide whether the touch UI should be used and return a boolean value.

[edouardbrasier]

'ontouchstart' in document returns true in Chrome but false in Firefox.

My laptop is a thinkpad with a touch screen indeed.
But then how come does it shows a different design on Firefox and Edge. Shouldn't it be consistent?
It is because Edge and Firefox aren't respecting the standard?

[vlad-ignatov]

I don't think there is a standard for that. It is just a browser implementation detail.
Anyways, right now the default behaviour of the component is to check for 'ontouchstart' in document and decide whether to use the touch UI. Apparently this is not enough and I'll have to think for another solution.

Considering that it seems impossible to properly detect a touchscreen (http://www.stucox.com/blog/you-cant-detect-a-touchscreen/), I think I will have to remove that "auto" option and make the mobile prop default to false in the next version.

[edouardbrasier]

Thanks for the explanations

[vlad-ignatov]

This issue should now be closed as it cannot be "fixed" without introducing backwards compatibility issues. Future major versions of the component will eventually stop trying to auto-detect mobile devices.