MaterialDoubleBox has issues in IE

[dramesh123]

Hi,
Since my earlier post has been closed, i am not sure how to reopen that so i am creating new one.

We can see couple of issues here.

In Firefox, for MaterialDoubleBox is working fine and also allows arrow icon to increment/decrement the number (Similar to spinner widget).
But in IE, this is not the case. It is not showing the arrow icons to avail this feature.
API for this widget is not working
In Firefox : boxObject.getValue() and boxObject.getValueAsNumber() function returns proper result .
In IE : boxObject.getValue()and boxObject.getValueAsNumber() function returns NULL and NaN.

Please help us in this regard.
Note : We are not overriding the default CSS of this widget.

Thanks
Ramesh

[kevzlou7979]

As I read the forum, IE does not support the arrow / down navigations of input type number but there is one thing you can have a workaround using polyfil.

Here's the link
http://stackoverflow.com/questions/13955731/input-type-number-not-working-in-ie10

[kevzlou7979]

By the way here's another link for IE Browser ticket for input spinner.
https://connect.microsoft.com/IE/feedbackdetail/view/2427100/inputs-with-type-number-do-not-have-spinner-controls-in-edge

[hajo70]

I use the following work-around:

(function () {

/* see https://gist.github.com/jonathansampson/c9071cc90e0014f4859f#file-valueasnumber-js */

/* Internet Explorer 11 may have trouble retrieving the number type
of an input value. This short script performs a quick test, and repairs
the functionality if necessary. Load before attempting to use the
`valueAsNumber` property on input elements. */

"use strict";

var a = document.createElement( "input" );

a.setAttribute( "type", "number" );
a.setAttribute( "value", 2319 );

if ( "valueAsNumber" in a && a.value != a.valueAsNumber ) {
    if ( "defineProperty" in Object && "getPrototypeOf" in Object ) {
        Object.defineProperty( Object.getPrototypeOf( a ), "valueAsNumber", {
            get: function () { return parseFloat( this.value.replace(',', '.') ); }
        });
    }
}

}());

[kevzlou7979]

Hi @hajo70,

I just updated the code for MaterialNumberBox getValue() can you check into your side whether the fix is working or not. Thanks Note on my side (Demo showcase) the method getValue() is working on both IE10+ and other browsers.

Thanks

[hajo70]

Well I tested in in a German Windows environment with IE11 (Windows 7) and Edge (Windows 10). Both allow to enter a number using the German decimal separator which is a ','. If I do this, Edge returns null and IE11 throws a NumberFormatException. It works in both browsers with the decimal separator '.'. Chrome and Firefox both support the ',' as decimal separator.

I used the SNAPSHOT based on gwt-material-2.0-20170322.060151-242.pom.

[kevzlou7979]

Ah ok so you are having a different separator. Will see a solution for that.

[hajo70]

I did a little more investigation: Double.parseDouble() is always locale independent, thus it expects the decimal separator ‘.’. The com.google.gwt.i18n.client.NumberFormat.getDecimalFormat().parse() would do it if the locale had been configured correctly, but it would not handle scientific notation like ‘5e9’. For most browsers the number input field does the magic. If I enter ‘5,3’ in such a field it’s value is ‘5.3’. But this does not work for IE11 and Edge.

I would propose the following solution: One should be able to set a NumberFormat for any MaterialNumberBox. If a NumberFormat has been set, getValueAsNumber() uses numberFormat.parse() otherwise it uses Double.parseDouble().

This solution has one drawback: The NumberFormat wouldn’t be used to format the number. This might lead to some irritation. Thus another solution would be to move the number-parsing into a NumberParserMixin which can be easily replaced by some custom implementation.

[kevzlou7979]

Agreed to your proposal. Might be good to submit a PR based on your solution especially the usage of NumberParserMixin then we can create a TestCase after. Thanks in advance