Erasing date input field fails in Chrome and Firefox .... Edge works fine

Erasing date input field fails in Chrome and Firefox .... Edge works fine

  

Hi all, a (very) strange issue ... posted it before, some time ago, but no solution then.

I hope someone recognizes / experienced this issue too, and even better, has a (simple) solution!


I have several applications, using different themes, straight forward apps, nothing special. On my laptop, using Chrome of Firefox (latest versions, automatically updated), it's not possible to erase the content of a date field (generated by OutSystems, using the calendar widget, nothing special to it). Opening the same apps om my laptop in Microsoft Edge ... no problem, working.

Oke, strange. So I asked my colleague to try the same on his laptop, no problem at all ... also working fine in Chrome and Firefox.

What can possibly be wrong with my configuration? As far as I know it's completely standard. 

Not a major issue to me, if I want to I know how to build a wordaround using JavaScript, but that's not what you want. And consider a similar problem when developing an app for a client ... how to explain a situation like this?

In the attached file I'll show you some screen shot demonstrating the process:

Screen 1: showing an already saved and active Project

Screen 2: clicking in field End, showing the default generated calendar widget. (and not visible on the screen shot, disabling the input field itself, visible through an prohibited cursor icon)

Screen 3:Selecting the date, but NOT able to erase the date using Del, Backspace or whatever key

Screen 4: Select another field and the End date stayes disabled (field grayed) …

Screen 5: … but still able to alter the date using the calendar widget.

Screen 6: using Edge … no problem at all

Really, nobody else encountered this (strange) issue?

Heard from a colleague of mine he worked in a project and 1 other developer had the same issue as I specified, but nobody else in the project. So, it seems to be a rare issue, but it exists.

This is the HTML of a datefield on the screen I didn't put the cursor in yet:

<input id="QProjectTheme_wt88:wtMainContent:WebPatterns_wt112:wtColumn2:wtProject_PreIntakeDate" name="QProjectTheme_wt88:wtMainContent:WebPatterns_wt112:wtColumn2:wtProject_PreIntakeDate" maxlength="20" tabindex="84" class="ThemeGrid_Width3 ThemeGrid_MarginGutter SmartInput ReadOnly" placeholder="DD-MM-YYYY" autocorrect="off" spellcheck="false" origvalue="" type="text">


And when I place the cursor in the field it is immediately changed in:

<input id="QProjectTheme_wt88:wtMainContent:WebPatterns_wt112:wtColumn2:wtProject_PreIntakeDate" name="QProjectTheme_wt88:wtMainContent:WebPatterns_wt112:wtColumn2:wtProject_PreIntakeDate" maxlength="20" tabindex="84" class="ThemeGrid_Width3 ThemeGrid_MarginGutter SmartInput ReadOnly" placeholder="DD-MM-YYYY" autocorrect="off" spellcheck="false" origvalue="" readonly="readonly" type="text">


As you can see the tag readonly="readonly" has been added, and it stays there, also when I leave the field.

This piece of code I found in the Input_Calendar Web Block Javascript. Althought I really do not understand what happens here, it says some readonly is added when we are on a touch enabled device. My laptop is a Lenovo with a (4K) touch screen, however I work on an external non-touch screen. This might have something to do with my problem?


SyntaxEditor Code Snippet

else if (!this.isAndroidDefaultBrowser && !!('ontouchstart' in window) && typeof outsystems.internal.$ !== "undefined") { 
    //This case is for when we are on a touch enabled device that does not support datepickers which means we will use our datepicker
    //But, since the input is still of type text, when the user clicks on it, it will open the on-screen keyboard.
    //To prevent that, we set the input as read-only
    //However we only do this inside the handler because if we set it now as read only and it is inside a Form, its javascript will disable the datepicker
    var input = outsystems.internal.$('#' + params["inputField"]);
    input.on('focus', function() {
        input.attr('readonly', 'true');
    });
 }

Hello Charles :)

Sorry for taking so long to get to you, I'm currently trying to understand your issue. While I might have some suggestions I just want to make sure that I really understood the issues correctly and sending an oml would be great :) It doesn't have to have data just the logic of what you are trying to do on the images that you've shown us.

That would help a lot!

Thnx for replying Rita. I can send you the complete oml, no problem, but I think that won't help. Big change that when you run the app you'll have no problem at all.

There's really nothing special in what I do ... a standard form, standard date input fields using the standand Input_calendar web block. And it works fine everywhere in our company, on every laptop / deskop .... except for my Lenovo Yoga 2 Pro with touch screen .... when setting the focus to a date input field, in Firefox and Chrome, the html-tag readonly="readonly" is instantly added to the input field (see a few posts above), and is not removed again. So no way to clear the date field.

Somewhere somehow in OutSystems an event occurs and is decided to add the readonly tag. Some digging around pointed me to the Javascript code related to the Input_Calendar web block, that seeems to be added in some specific cases a touch screen is involved. Perhaps the problem is to be found in that area?

Privately I use another Lenovo (with another Windows edition) at home, and the same problem 

Microsoft Edge however works fine,

(PS I'll send you the complete oml in a pm)

Hi Charles,

I have this problem on my client's touch-enabled big screen panel but on a different software.

It seems touch-enabled screens (not phone/tablet, but big screen panel or notebook) complicate things.

I hope Outsystems can sort this problem out...

Hi Harlin, 

Finally somebody with the same problem ... I was doubting myself :-)

I think you're right about touch-enabled screens (not phone/tablet, but big screen panel or notebook).

Let's indeed hope OutSystems will recognize this problem and will solve it.

You can try to disable touch events on Chrome as a workaround... 

http://ccm.net/faq/40811-google-chrome-how-to-disable-touch-input

Thanks Harlin, tried it in Chrome and it worked!

I'm using Firefox so searched for an equivalent solution. Entering About:config in the address line of Firefox brings you to a page with lots of settings.

Double click on Dom.w3c_touch_events.enabled and set the value to 0.

Some explaination can be found here - http://stackoverflow.com/questions/25024197/how-to-make-sure-touch-events-are-enabled-in-firefox-desk-top-browser

Still, it's a workaround. I guess it's not a prio 1 issue for OutSystems but I really would like to see it solved in OutSystems some day.

Glad it worked, although it was only a workaround.