masked text not working on iOS with browserInputType: digits

[claudiobosticco]

SmartClient Version: v10.1p_2016-02-16/Enterprise Development Only (built 2016-02-16)

Safari on iOS 9.2.1 (iPhone 5, physical device)

please modify the #maskedTextItem sample like this:

isc.DynamicForm.create({
    ID: "contactForm",
    width: 400,
    fields: [
        { name: "firstName", title: "First name", editorType: "TextItem",
          mask: ">?<??????????????", hint: "<nobr>&gt;?&lt;??????????????</nobr>"},
        { name: "lastName", title: "Last name", editorType: "TextItem",
          mask: ">?<??????????????", hint: "<nobr>&gt;?&lt;??????????????</nobr>"},
        { name: "state", title: "State", editorType: "TextItem",
          mask: ">LL", hint: "<nobr>&gt;LL</nobr>"},
        { name: "phoneNo", title: "Phone No.", editorType: "TextItem",
          mask: "(###) ###-####", hint: "(###) ###-####", showHintInField: true, browserInputType:"digits"},
        { name: "dateItem", title: "Date", editorType: "DateItem",
          useTextField: true, useMask: true},
        { name: "dateTimeItem", title: "Date Time", editorType: "DateTimeItem",
          useTextField: true, useMask: true},
        { name: "timeItem", title: "Time", editorType: "TimeItem",
          useMask: true}
    ]
});

I've added browserInputType:"digits" to the phoneNo formItem.
You'll see that you'll not be able to type in it.

[claudiobosticco]

If you instead define a hint with showHintInField:true and without a mask, there's a different problem: when you put the focus in the formItem, the hint stays there. It disappears only when you start typing.

isc.DynamicForm.create({
    ID: "contactForm",
    width: 400,
    fields: [
        { name: "firstName", title: "First name", editorType: "TextItem",
          mask: ">?<??????????????", hint: "<nobr>&gt;?&lt;??????????????</nobr>"},
        { name: "lastName", title: "Last name", editorType: "TextItem",
          mask: ">?<??????????????", hint: "<nobr>&gt;?&lt;??????????????</nobr>"},
        { name: "state", title: "State", editorType: "TextItem",
          mask: ">LL", hint: "<nobr>&gt;LL</nobr>"},
        { name: "phoneNo", title: "Phone No.", editorType: "TextItem",
          hint: "(###) ###-####", showHintInField: true, browserInputType:"digits"},
        { name: "dateItem", title: "Date", editorType: "DateItem",
          useTextField: true, useMask: true},
        { name: "dateTimeItem", title: "Date Time", editorType: "DateTimeItem",
          useTextField: true, useMask: true},
        { name: "timeItem", title: "Time", editorType: "TimeItem",
          useMask: true}
    ]
});

[claudiobosticco]

SmartClient Version: v10.1p_2016-02-18/Enterprise Development Only (built 2016-02-18)

Chrome on OSX

Hello, another problem with browserInputType: "digits", which may or not be related.
Please modify the formLayoutTitles sample like this:

isc.DynamicForm.create({
    fields: [
        { 
          name:"quantity", validateOnExit:true, browserInputType:"digits", type:"integer",
          validators:[
            {type:"integerRange", min:1, max:100}
          ]
        },
    ]
});

then type a value in the quantity item. You'll see this warning in the developer console:

15:34:55.309:KPR7:WARN:Log:InvalidStateError: Failed to read the 'selectionStart' property from 'HTMLInputElement': The input element's type ('number') does not support selection.
Stack from error.stack:
    FormItem.getSelectionRange(<no args: exited>) on [TextItem ID:isc_TextItem_2 name:quantity] @ ISC_Forms.js:1102:159
    FormItem._rememberPreChangeSelection(<no args: exited>) on [TextItem ID:isc_TextItem_2 name:quantity] @ ISC_Forms.js:1250:347
    FormItem.rememberSelectionForUpdate(<no args: exited>) on [TextItem ID:isc_TextItem_2 name:quantity] @ ISC_Forms.js:1249:7
    FormItem.handleKeyPress(<no args: exited>) on [TextItem ID:isc_TextItem_2 name:quantity] @ ISC_Forms.js:1237:481
    [c]Class.invokeSuper(<no args: exited>) on [TextItem ID:isc_TextItem_2 name:quantity] @ ISC_Core.js:286:93
    [c]Class.Super(<no args: exited>) on [TextItem ID:isc_TextItem_2 name:quantity] @ ISC_Core.js:278:170
    TextItem.handleKeyPress(<no args: exited>) on [TextItem ID:isc_TextItem_2 name:quantity] @ ISC_Forms.js:1641:404
    [c]EventHandler.bubbleEvent(<no args: exited>) on [Class EventHandler] @ ISC_Core.js:1644:89
    [c]EventHandler.handleKeyPress(<no args: exited>) on [Class EventHandler] @ ISC_Core.js:1418:122
    EventHandler._handleNativeKeyPress(<no args: exited>) on [Class EventHandler] @ ISC_Core.js:1415:11
    [c]EventHandler.dispatch(_1=>[c]EventHandler.$kd(), _2=>[object KeyboardEvent]) on [Class EventHandler] @ ISC_Core.js:1718:108
    HTMLDocument.eval(event=>[object KeyboardEvent]) @ [no file]:3:123

and this error in the chrome console:

Uncaught InvalidStateError: Failed to read the 'selectionStart' property from 'HTMLInputElement': The input element's type ('number') does not support selection.
isc_c_EventHandler_dispatch @ ISC_Core.js?isc_version=v10.1p_2016-02-18.js:1718
(anonymous function) @ VM32109:3

is it harmful or not?

[Isomorphic]

Thanks for the notifications here.
To take them point by point:

On issue #1: the native number input type is basically incompatible with mask. The problem is that an HTML <input> element with type set to "number" silently rejects any non numeric value applied to it by application code, and the mask feature relies on non numeric characters being displayed (the "_" placeholder indicating the expected length, and in your sample the "(", ")" and space characters).
Sorry for the confusion - we will expand the documentation, and add a warning when this combination of settings is detected so devs are aware of the limitation in the future.

On issue #2: this is actually unrelated to the "digits" setting - by default showHintInField uses the HTML5 placeholder attribute to display the hint in the field, and native behavior is to leave the placeholder text visible even when the item has focus until the user enters a string.
You can explicitly switch usePlaceholderForHint to false for your item to tell the framework to handle applying and clearing the in-field hint text explicitly - and our logic in this case will clear the hint on focus.

On issue #3: Again, this is related to the <input type="number"> element - it appears that this warning can be safely ignored for now but we're looking at whether there are any subtle ill effects here, and modifying things to ensure this warning is not displayed.

Regards
Isomorphic Software

[Isomorphic]

Incidentally, you may want to consider browserInputType "tel" rather than "digits". It looks like this will better match your usage and you likely won't hit the same problems using this input type.

Regards
Isomorphic Software

[claudiobosticco]

Thank you very much for the detailed explanation and for the suggestions!
Actually I wasn't aware of the HTML5 placeholder attribute. That and the browserInputType 'tel' are perfect for my use case.

[claudiobosticco]

SmartClient Version: v10.1p_2016-02-28/Enterprise Deployment (built 2016-02-28)

Chrome on Android 6.0.1

Hello, I've found a problem (on Android 6.0.1, Nexus 5 - real device), please test the maskedTextItem sample and try to delete something typed in the phone No. formItem.
the digits aren't deleted, but instead are shifted to the right of the caret.

[Isomorphic]

Just to be clear on this - you're seeing this behavior on the sample we ship, correct? We shouldn't need to modify the code to reproduce it?
Thanks

[claudiobosticco]

correct, no need to modify the sample.

[Isomorphic]

Just a quick follow up here to let you know we're reproducing the problem and looking at how best to fix it. We'll let you know when we have made some progress

[claudiobosticco]

SmartClient Version: v11.0p_2016-07-28/Enterprise Development Only (built 2016-07-28)

Hello, any news about the bug of post #7 ? Seems still there.

[Isomorphic]

We've applied a fix for editing problems with masked TextItems that should resolve your issue to SC 11.0p and newer. (The issue wasn't specific to Android.) The update will be in the nightly builds dated 08-03-2016 and newer.

[claudiobosticco]

SmartClient Version: v11.0p_2016-08-03/Enterprise Development Only (built 2016-08-03)

I can confirm it's fixed, thank you very much.