DateChooser clicks on mobile iOS 14 and Edge mobile emulation are recorded at the wrong place

[Blama]

Hi Isomorphic,

I'm in the process of updating from 12.0p to 12.1p. Testing I noticed a blocking issue with DateChooser in v12.1p_2022-06-18 (iOS 14, Edge 102.0.1245.44 Win 10) and the same behavior in v13.0p_2022-06-17 (only tested Edge 102.0.1245.44 Win 10).

For the video I used this sample in Edge iPhone SE emulation mode. It also happens in other mobile device emulation modes.
The first click is OK, but if you reopen the DateChooser, subsequent clicks are recorded too low.
In my app on the iPhone it the 3 rows (=weeks) too low, on the video from the computer it is 1 row (=week) too low.

• Click Jun 8 -> OK
• Click Jun 15 -> Jun 22 selected
• Click Jun 29 -> Jul 6 selected

Can you have a look?

Best regards
Blama

[Blama]

Hi Isomorphic,

could you reproduce this one? This one effectively breaks the framework on mobile if you use any date fields.

Best regards
Blama

[Blama]

Hi Isomorphic,

there seems to be an issue with 12.1 builds (showcase still on v12.1p_2022-06-27).
Also, could you reproduce this one? Do you need any more information?

Best regards
Blama

[Isomorphic]

hi Blama ,

12.1 hasn't been modified since June 26, so there's been no new build since then.

We *do* see the issue with full-screen DateChoosers in both Edge and Chrome mobile emulators - but not, at first glance, in actual mobile devices. We'll take a look.

[michalg]

This is a kind of patch we are using so far:

isc.DateChooser.addMethods({

    //#3619 can not choose date if picker shown again for the same dateItem
    //Still required in v13.0p_2022-07-05
    show : function () {
        var returnVal = this.Super("show", arguments);


        if (this.autoClose) {
            // pass this dateChooser as an unmasked widget to showClickMask because
            // when the dateChooser is shown from a modal window, the dateChooser
            // ends up being masked by its own clickmask for some unknown reason.
            this.showClickMask(this.getID()+".close();", true, this);
            this.bringToFront();
        }

        //#3619 can not choose date if picker shown again for the same dateItem
        if (this.isDrawn()) this.clear();
        this.Super("show", arguments);

        return returnVal;
    }
});

MichalG

[Blama]

Hi Isomorphic,

12.1 hasn't been modified since June 26, so there's been no new build since then.

Thanks, I did not know that you do it like that, but this of course makes sense.

We *do* see the issue with full-screen DateChoosers in both Edge and Chrome mobile emulators - but not, at first glance, in actual mobile devices. We'll take a look.

I just retested with 2022-07-08 13.0p on my iPhone SE2 iOS 15.3.1 in the various controls sample and have the same issue there - nothing special to do.

• 1st click in newly started sample is OK
• Subsequent touches/clicks are recorded one row too low (not three like in my app)
• If you touch and hold and move, the popup is not closed (but the wrong date is selected). Now touching/clicking a date selects the correct date.

I have a .mov screen capture of this behavior, but it does not show the touches like the video in #1 with ScreenToGif does, so it's not really helpful here.

Best regards
Blama

[Blama]

Hi michalg,

This is a kind of patch we are using so far

Good to see I'm not the only one with this problem. Did you report this issue before creating your patch?
I kinda like to use the unmodified framework though, if possible.

But thanks a lot for the workaround.

Best regards
Blama

[michalg]

Hi Blama,
No, I haven't report this one - hoped to be temporary regression.
Thanks for the report.
MichalG

[Blama]

Hi Isomorphic,

I managed to get this working with assistive touch on the iPhone, frame reduction and conversion to .gif with ScreenToGif.

I click these dates (11th (= today) selected at start):

• Jul, 7th (OK)
• Jul, 6th (13th selected)
• Jul, 13th (20th selected)

Best regards
Blama

[Isomorphic]

We've made a fix for this to SmartClient 13.1 which will be ported back to older releases soon. We believe the issue affects all HandSet targets. The confusion about what's affected may be related to the issue not happening the first time the DateChooser is shown, but only upon subsequent showings.

[Blama]

Hi Isomorphic,

I can see that it works as expected using Firefox 102 iPhone SE 2nd generation iOS 14.6 emulation mode.
I tested using v12.1p_2022-07-19, v13.0p_2022-07-22 and SNAPSHOT_v13.1d_2022-07-22.

I'll test with a real device and SmartGWT 12.1p later and report back.

Thank you & Best regards
Blama

[Blama]

Hi Isomorphic,

using v12.1p_2022-07-19 it's working on my app on my iPhone as well.

Thank you & Best regards
Blama

[Blama]

Hi Isomorphic,

doing a last test before updating to 12.1p I noticed that in my webapp the DateChooser are now full screen width. This does not happen in the showcase and I'm looking for why this is happening for me. (The DateChooser in the mobile version is fullscreen, but this is fine/expected.)

I did not find a setting in the DateChooser docs that could have changed this width on Desktop. Especially the load_skin.js in my used file and your current 12.1p
don't say anything like "width: 100%".

Settings I found:

• Current showcase 12.0p load_skin.js: width: 236 (and the Developer Console watch tab says the width of isc_DateChooser_0 is 246 (possibly some padding regarding 236/246))
• Current showcase 12.1p load_skin.js: no width setting (but the Developer Console watch tab says the width of isc_DateChooser_0 is 246 as well. Where does this come from?)
• My load_skin.js: width: 236 (but the Developer Console watch tab says the width of isc_DateChooser_0 is 1920)

Do you have an idea what could cause this change in behavior in my app?

Thank you & Best regards
Blama

[Blama]

Hi Isomorphic,

this seems to be related to this in my load_skin.js:

isc.DateChooser.changeDefaults("buttonLayoutDefaults", {
            membersMargin:10,
            layoutMargin: 0,
            layoutTopMargin:4,
            styleName:"dateChooserBorderTop",
            height:44, width:"100%"
        });

If I remove the width:"100%" here, everything is fine again (the stock 12.1p load_skin.js also does not have this setting).
It's not clear to me why this has this effect (navigationLayoutDefaults is also width:"100%", and here this does not result in a size change). But I can get my application to look like before with this, so this is solved for me.

Thanks & Best regards
Blama