Announcement

Collapse
No announcement yet.
X
  • Filter
  • Time
Clear All
new posts

    12.0p/12.1p Problem with DateItem and browserInputType

    Hi Isomorphic,

    we got a report about a problem when using our application in a Apache Cordova/phoneGap App after update to iOS14.
    Analyzing this it turns our that root cause of the problem has most likely been around for long and is present in at least v12.0p_2020-03-11, v12.0p_2020-09-20, v12.1p_2020-09-20 and does also affect Chrome and non-phoneGap iOS environments when using browserInputType.

    In our application the problem manifests itself as follows:
    • v12.0p_2020-03-11 Chromium 85: DateItem not filled (as you can see in the testcase below)
    • v12.0p_2020-03-11 iOS 13 Safari: DateItem not filled (as you can see in the testcase below)
    • v12.0p_2020-03-11 iOS 14 Safari: DateItem not filled (as you can see in the testcase below)
    • v12.0p_2020-03-11 iOS 13 phonegap UIWebView: DateItem not filled
    • v12.0p_2020-03-11 iOS 14 phonegap UIWebView: DateItem filled with "undefined" and not able to use any SmartClient or iPhone DataPicker, FormItem and therefore Form broken.
    I have the strong feeling that this all comes from the same root cause visible in the modified Showcase sample (v12.0p_2020-09-20).

    Steps to reproduce:
    • Run sample
    • Edit next shipment to Sept. 30th
    • Save
    • Run sample again
    • Result: No date in the 1st DateItem (unexpected), but in all other ones (expected, time portion not being present most likely caused by the field being type="date" in the .ds.xml)
    Also there are warnings in the Chrome console:

    Code:
    ISC_Forms.js?isc_version=v12.0p_2020-09-20.js:2460 The specified value "undefined" does not conform to the required format, "yyyy-MM-dd".
    ISC_Forms.js?isc_version=v12.0p_2020-09-20.js:2460 The specified value "undefined" does not conform to the required format.  The format is "yyyy-MM-ddThh:mm" followed by optional ":ss" or ":ss.SSS".
    ISC_Forms.js?isc_version=v12.0p_2020-09-20.js:2460 The specified value "09/30/2020" does not conform to the required format, "yyyy-MM-dd".
    ISC_Forms.js?isc_version=v12.0p_2020-09-20.js:2460 The specified value "09/30/2020" does not conform to the required format, "yyyy-MM-dd".
    
    Stacktrace for the 1st one:
    ISC_Forms.js?isc_version=v12.0p_2020-09-20.js:2460 The specified value "undefined" does not conform to the required format, "yyyy-MM-dd".
    isc_NativeDateItem_setElementValue @ ISC_Forms.js?isc_version=v12.0p_2020-09-20.js:2460
    isc_FormItem__setElementValue @ ISC_Forms.js?isc_version=v12.0p_2020-09-20.js:1199
    isc_FormItem__showValue @ ISC_Forms.js?isc_version=v12.0p_2020-09-20.js:1130
    isc_c_Class_invokeSuper @ ISC_Core.js?isc_version=v12.0p_2020-09-20.js:317
    isc_c_Class_Super @ ISC_Core.js?isc_version=v12.0p_2020-09-20.js:309
    isc_TextItem__showValue @ ISC_Forms.js?isc_version=v12.0p_2020-09-20.js:1946
    isc_FormItem_setValue @ ISC_Forms.js?isc_version=v12.0p_2020-09-20.js:1126
    isc_c_Class_invokeSuper @ ISC_Core.js?isc_version=v12.0p_2020-09-20.js:317
    isc_TextItem_setValue @ ISC_Forms.js?isc_version=v12.0p_2020-09-20.js:1943
    isc_DateItem_setValue @ ISC_Forms.js?isc_version=v12.0p_2020-09-20.js:2505
    isc_FormItem_clearValue @ ISC_Forms.js?isc_version=v12.0p_2020-09-20.js:1198
    isc_DynamicForm_setItemValues @ ISC_Forms.js?isc_version=v12.0p_2020-09-20.js:436
    isc_DynamicForm__delayedSetValues @ ISC_Forms.js?isc_version=v12.0p_2020-09-20.js:413
    isc_c_Page_handleEvent @ ISC_Core.js?isc_version=v12.0p_2020-09-20.js:1849
    isc_c_EventHandler__handleIdle @ ISC_Core.js?isc_version=v12.0p_2020-09-20.js:2245
    isc_c_Class_fireCallback @ ISC_Core.js?isc_version=v12.0p_2020-09-20.js:326
    isc_c_Timer__fireTimeout @ ISC_Core.js?isc_version=v12.0p_2020-09-20.js:1835
    (anonymous) @ ISC_Core.js?isc_version=v12.0p_2020-09-20.js:1832
    setTimeout (async)
    isc_c_Timer_setTimeout @ ISC_Core.js?isc_version=v12.0p_2020-09-20.js:1832
    isc_c_EventHandler_startIdleTimer @ ISC_Core.js?isc_version=v12.0p_2020-09-20.js:2245
    isc_c_Page_setEvent @ ISC_Core.js?isc_version=v12.0p_2020-09-20.js:1842
    isc_DynamicForm_draw @ ISC_Forms.js?isc_version=v12.0p_2020-09-20.js:391
    isc_Layout_layoutChildren @ ISC_Foundation.js?isc_version=v12.0p_2020-09-20.js:357
    isc_Layout_drawChildren @ ISC_Foundation.js?isc_version=v12.0p_2020-09-20.js:269
    isc_Canvas_draw @ ISC_Core.js?isc_version=v12.0p_2020-09-20.js:2647
    isc_Canvas_addChild @ ISC_Core.js?isc_version=v12.0p_2020-09-20.js:2856
    isc_ExampleViewer_addCanviiToView @ ISC_ExampleViewer.js?isc_version=v12.0p_2020-09-20.js:96
    isc_ExampleViewer_evalExample @ ISC_ExampleViewer.js?isc_version=v12.0p_2020-09-20.js:92
    isc_ExampleViewer_showExample @ ISC_ExampleViewer.js?isc_version=v12.0p_2020-09-20.js:92
    isc_ExampleSourcePane_tryEditedCode @ ISC_ExampleViewer.js?isc_version=v12.0p_2020-09-20.js:111
    isc_SourceEditor_tryClicked @ ISC_ExampleViewer.js?isc_version=v12.0p_2020-09-20.js:115
    eval @ VM7884:3
    isc_StatefulCanvas_handleActivate @ ISC_Foundation.js?isc_version=v12.0p_2020-09-20.js:238
    isc_StatefulCanvas_handleClick @ ISC_Foundation.js?isc_version=v12.0p_2020-09-20.js:239
    isc_c_EventHandler_bubbleEvent @ ISC_Core.js?isc_version=v12.0p_2020-09-20.js:2165
    isc_c_EventHandler_handleClick @ ISC_Core.js?isc_version=v12.0p_2020-09-20.js:2000
    isc_c_EventHandler__handleMouseUp @ ISC_Core.js?isc_version=v12.0p_2020-09-20.js:1984
    isc_c_EventHandler_handleMouseUp @ ISC_Core.js?isc_version=v12.0p_2020-09-20.js:1975
    isc_c_EventHandler_dispatch @ ISC_Core.js?isc_version=v12.0p_2020-09-20.js:2252
    eval @ VM7506:3
    Best regards
    Blama


    Code:
    isc.DynamicForm.create({
        ID: "dynamicForm1", autoFetchData: true,
        dataSource: "supplyItem",
        initialCriteria: { _constructor: "AdvancedCriteria", operator: "and",
            criteria: [
                { fieldName: "SKU", operator: "equals", value: "45300" }
            ]
        },
        fields : [
           {name: "itemID"},
           {name: "itemName"},
           {name: "SKU"},
           {name: "nextShipment", useTextField: true, editorType: "DateItem", browserInputType: "date", title: "DI Mobile" },
           {name: "save", title: "Save data", editorType: "ButtonItem", click: "dynamicForm1.saveData()" },
        ]
    });
    
    isc.DynamicForm.create({
        ID: "dynamicForm2", autoFetchData: true,
        dataSource: "supplyItem",
        initialCriteria: { _constructor: "AdvancedCriteria", operator: "and",
            criteria: [
                { fieldName: "SKU", operator: "equals", value: "45300" }
            ]
        },
        fields : [
           {name: "itemID"},
           {name: "itemName"},
           {name: "SKU"},
           {name: "nextShipment", useTextField: true, editorType: "DateItem", title: "DI" },
           {name: "save", title: "Save data", editorType: "ButtonItem", click: "dynamicForm2.saveData()" },
        ]
    });
    
    isc.DynamicForm.create({
        ID: "dynamicForm3", autoFetchData: true,
        dataSource: "supplyItem",
        initialCriteria: { _constructor: "AdvancedCriteria", operator: "and",
            criteria: [
                { fieldName: "SKU", operator: "equals", value: "45300" }
            ]
        },
        fields : [
           {name: "itemID"},
           {name: "itemName"},
           {name: "SKU"},
           {name: "nextShipment", useTextField: true, editorType: "DateTimeItem", browserInputType: "datetime", title: "DTI Mobile" },
           {name: "save", title: "Save data", editorType: "ButtonItem", click: "dynamicForm3.saveData()" },
        ]
    });
    
    isc.DynamicForm.create({
        ID: "dynamicForm4", autoFetchData: true,
        dataSource: "supplyItem",
        initialCriteria: { _constructor: "AdvancedCriteria", operator: "and",
            criteria: [
                { fieldName: "SKU", operator: "equals", value: "45300" }
            ]
        },
        fields : [
           {name: "itemID"},
           {name: "itemName"},
           {name: "SKU"},
           {name: "nextShipment", useTextField: true, editorType: "DateTimeItem", title: "DTI" },
           {name: "save", title: "Save data", editorType: "ButtonItem", click: "dynamicForm4.saveData()" },
        ]
    });
    
    isc.VLayout.create({
        membersMargin: 10,
        members: [dynamicForm1, dynamicForm2, dynamicForm3, dynamicForm4]
    });
    Last edited by Blama; 22 Sep 2020, 05:01.

    #2
    I also reproduced the issue in a SmartGWT BuiltInDS based sample, in case you want to try this as well:
    Code:
    package com.smartgwt.sample.client;
    
    import com.google.gwt.core.client.EntryPoint;
    import com.smartgwt.client.Version;
    import com.smartgwt.client.core.KeyIdentifier;
    import com.smartgwt.client.data.Criteria;
    import com.smartgwt.client.data.DataSource;
    import com.smartgwt.client.util.Page;
    import com.smartgwt.client.util.PageKeyHandler;
    import com.smartgwt.client.util.SC;
    import com.smartgwt.client.widgets.IButton;
    import com.smartgwt.client.widgets.Window;
    import com.smartgwt.client.widgets.events.ClickEvent;
    import com.smartgwt.client.widgets.events.ClickHandler;
    import com.smartgwt.client.widgets.form.DynamicForm;
    import com.smartgwt.client.widgets.form.fields.ButtonItem;
    import com.smartgwt.client.widgets.form.fields.DateItem;
    import com.smartgwt.client.widgets.form.fields.DateTimeItem;
    import com.smartgwt.client.widgets.form.fields.FormItem;
    import com.smartgwt.client.widgets.layout.VLayout;
    import com.smartgwt.client.widgets.tab.Tab;
    import com.smartgwt.client.widgets.tab.TabSet;
    
    public class BuiltInDS implements EntryPoint {
        private VLayout mainLayout;
        private IButton recreateBtn;
    
        public void onModuleLoad() {
            KeyIdentifier debugKey = new KeyIdentifier();
            debugKey.setCtrlKey(true);
            debugKey.setKeyName("D");
    
            Page.registerKey(debugKey, new PageKeyHandler() {
                public void execute(String keyName) {
                    SC.showConsole();
                }
            });
    
            mainLayout = new VLayout(20);
            mainLayout.setWidth100();
            mainLayout.setHeight100();
    
            recreateBtn = new IButton("Recreate");
            recreateBtn.addClickHandler(new ClickHandler() {
                @Override
                public void onClick(ClickEvent event) {
                    recreate();
                }
            });
            mainLayout.addMember(recreateBtn);
            recreate();
            mainLayout.draw();
        }
    
        private void recreate() {
            Window w = new Window();
            w.setWidth("95%");
            w.setHeight("95%");
            w.setMembersMargin(0);
            w.setModalMaskOpacity(70);
            w.setTitle(" (" + Version.getVersion() + "/" + Version.getSCVersionNumber() + ")");
            w.setTitle("Problem with DateItems on Mobile" + w.getTitle());
            w.setShowMinimizeButton(false);
            w.setIsModal(true);
            w.setShowModalMask(true);
            w.centerInPage();
            TabSet ts = new TabSet();
            ts.setHeight100();
            ts.setWidth100();
            ts.addTab(new Tab("DI_Mobile") {
                {
                    setPane(new MyDF(new DateItem("nextShipment") {
                        {
                            setUseTextField(true);
                            setBrowserInputType("date");
                        }
                    }));
                }
            });
            ts.addTab(new Tab("DI") {
                {
                    setPane(new MyDF(new DateItem("nextShipment") {
                        {
                            setUseTextField(true);
                        }
                    }));
                }
            });
            ts.addTab(new Tab("DTI_Mobile") {
                {
                    setPane(new MyDF(new DateTimeItem("nextShipment") {
                        {
                            setUseTextField(true);
                            setBrowserInputType("datetime");
                        }
                    }));
                }
            });
            ts.addTab(new Tab("DTI") {
                {
                    setPane(new MyDF(new DateTimeItem("nextShipment") {
                        {
                            setUseTextField(true);
                        }
                    }));
                }
            });
    
            w.addItem(ts);
            w.show();
        }
    
        private class MyDF extends DynamicForm {
            public MyDF(FormItem nextShipment) {
                super();
                setDataSource(DataSource.get("supplyItem"));
                setAutoFetchData(true);
                setInitialCriteria(new Criteria("SKU", "58074604"));
                setCanEdit(true);
                setCanHover(true);
    
                FormItem itemID = new FormItem("itemID");
                FormItem itemName = new FormItem("itemName");
                FormItem sku = new FormItem("SKU");
                FormItem inStock = new FormItem("inStock");
                ButtonItem saveBtn = new ButtonItem("save", "Speichern");
                saveBtn.addClickHandler(new com.smartgwt.client.widgets.form.fields.events.ClickHandler() {
                    @Override
                    public void onClick(com.smartgwt.client.widgets.form.fields.events.ClickEvent event) {
                        MyDF.this.saveData();
                    }
                });
    
                setFields(itemID, itemName, sku, inStock, nextShipment, saveBtn);
            }
        }
    }

    Comment


      #3
      We fixed a few things in this area - an internal conversion issue between formats, potentially null startDate and endDate on 'native' items, and missing styling on the NativeDateTimeItem in the sample.

      Please retest with a build dated September 24 or later.

      Comment


        #4
        Hi Isomorphic,

        I retested using v12.0p_2020-09-26 and all regarding my #1 is looking good in the modified showcase sample. I'll test with my application as well.
        One thing I noticed:
        I normal SmartGWT datepicker/datetimepicker takes long to show in the modified sample or just here.
        Also, I get this in the Win10 Chromium 85 console:

        Code:
        [Violation] 'mouseup' handler took 604ms
        [Violation] Forced reflow while executing JavaScript took 33ms
        ISC_Core.js?isc_version=v12.0p_2020-09-26.js:1832 [Violation] 'setTimeout' handler took 71ms
        Best regards
        Blama

        Comment


          #5
          Hi Isomorphic,

          the issue from #1 seems to be fixed for me in phoneGap iOS 14 as well.

          Thank you & Best regards
          Blama

          Comment

          Working...
          X