Bug #65055

Date and DateTimePicker not shown in FireFox and IE

Added by Job Rutgers almost 5 years ago. Updated about 2 years ago.

Status:
Closed
Priority:
Must have
Assignee:
-
Category:
Backend User Interface
Target version:
Start date:
2015-02-13
Due date:
% Done:

100%

TYPO3 Version:
7
PHP Version:
5.6
Tags:
Complexity:
hard
Is Regression:
No
Sprint Focus:
Stabilization Sprint

Description

Date and DateTimePicker is not shown in FireFox and IE in the latest master of Typo3


Related issues

Related to TYPO3 Core - Bug #65068: Range in DatePicker and DateTimePicker not handled Closed 2015-02-14

Associated revisions

Revision f47d3bce (diff)
Added by Benjamin Kott over 4 years ago

[BUGFIX] Date and DateTimePicker in IE

Releases: master
Resolves: #65055
Change-Id: I342cf15602ccd3d7769144eea031ba450e7033e4
Reviewed-on: http://review.typo3.org/38885
Reviewed-by: Wouter Wolters <>
Tested-by: Wouter Wolters <>
Reviewed-by: Markus Klein <>
Tested-by: Markus Klein <>

Revision 004d40df (diff)
Added by Benjamin Kott over 4 years ago

[FOLLOWUP][BUGFIX] Date and DateTimePicker in IE

Fixed wrong LESS path.

Releases: master
Resolves: #65055
Change-Id: I2d95775e2796e8b1fdff67430b287230699690de
Reviewed-on: http://review.typo3.org/38922
Reviewed-by: Andreas Fernandez <>
Tested-by: Andreas Fernandez <>
Reviewed-by: Wouter Wolters <>
Tested-by: Wouter Wolters <>

History

#1 Updated by Frederic Gaus almost 5 years ago

  • Sprint Focus set to Stabilization Sprint

#2 Updated by Mathias Schreiber almost 5 years ago

That's weird.
Clicking the icon should move the focus to the datefield which will then in return trigger the datepicker.
I do not get the error on Firefox, but can reproduce on IE9 and 10.

#3 Updated by Frederic Gaus almost 5 years ago

I can not confirm this issue on Firefox on Mac. But The Datefield of the Stop-Date (Expiration Date) is not useable for me.

#4 Updated by Nicole Cordes almost 5 years ago

Icons are shown in Firefox and IE as well.

In IE (even 11): Although the click on the icon does focus the input field, it doesn't show the date picker. But focusing the input field manually works just fine. I have tried to find any issue but I have no clue.

#5 Updated by Markus Klein almost 5 years ago

Can't reproduce on FF either, but IE11 has this issue.

I tried to debug a bit: My conclusion is that IE somehow does not trigger the focus event when clicking the label.
I wanted to modify the bootstrap datetimepicker to add a console.log() but it always uses the min.js version, which I did not fiddle around with.

So it would be necessary to confirm this thesis first.

#6 Updated by Jigal van Hemert almost 5 years ago

Clicking the label (the icon) in IE11 shows the datepicker for a very, very short time if the input field is empty. In this case there is also an onChange event (attached with the onChange="" attribute) which is triggered in IE11 (inserted a tracepoint in the IE debugger on TBE_EDITOR.fieldChanged).
Still a mystery what goes wrong with showing the datepicker itself...

#7 Updated by Jigal van Hemert almost 5 years ago

Attaching the t3js-datepicker class to DIV wrapper makes the date picker appear when clicking the label, but it doesn't work on the INPUT field anymore.
Next thing was to add an extra onClick="document.getElementById('formengine-input-HASH').click();" attribute for testing. In this case a click is forced on the INPUT field, but the same behaviour appears in IE11: if the field is empty the datepicker appears for some tenth of a second, if the field is filled it is not visible.
The example in
http://eternicode.github.io/bootstrap-datepicker/?markup=component&format=&weekStart=&startDate=&endDate=&startView=0&minViewMode=0&todayBtn=false&clearBtn=false&language=en&orientation=auto&multidate=&multidateSeparator=&keyboardNavigation=on&forceParse=on#sandbox
(also an icon after the form and a clear button inside if a date is set)
works flawlessly in IE11.

#8 Updated by Markus Klein almost 5 years ago

  • Status changed from New to Accepted
  • Target version changed from 7.1 (Cleanup) to next-patchlevel

Found the issue:

Two events are triggered: focus and click
However the order of the events is crucial but different in IE.

Chrome: focus, click
IE: click, focus

A condition in the bootstrap JS captures the double event thing and prevents hiding the picker again when the click event arrives.
Since the order is inverted in IE, the click event shows the picker and focus hides it again.

How to debug:

typo3/sysext/core/Classes/Page/PageRenderer.php:1635 change to 'twbs/bootstrap-datetimepicker' => $this->backPath . 'contrib/twbs/bootstrap-datetimepicker',

Set a breakpoint in typo3/contrib/twbs/bootstrap-datetimepicker.js:1185

#9 Updated by Job Rutgers almost 5 years ago

My FireFox problem is solved now after resetting to defaults.

In the latest master I still have some problems with IE11 when I click on the calender icon the pop-up won't show.

#10 Updated by Markus Klein over 4 years ago

  • Category set to Backend User Interface
  • Target version changed from next-patchlevel to 7.2 (Frontend)
  • Complexity set to hard

#11 Updated by Gerrit Code Review over 4 years ago

  • Status changed from Accepted to Under Review

Patch set 1 for branch master of project Packages/TYPO3.CMS has been pushed to the review server.
It is available at http://review.typo3.org/38885

#12 Updated by Gerrit Code Review over 4 years ago

Patch set 2 for branch master of project Packages/TYPO3.CMS has been pushed to the review server.
It is available at http://review.typo3.org/38885

#13 Updated by Anonymous over 4 years ago

  • Status changed from Under Review to Resolved
  • % Done changed from 0 to 100

#14 Updated by Gerrit Code Review over 4 years ago

  • Status changed from Resolved to Under Review

Patch set 1 for branch master of project Packages/TYPO3.CMS has been pushed to the review server.
It is available at http://review.typo3.org/38922

#15 Updated by Anonymous over 4 years ago

  • Status changed from Under Review to Resolved

#16 Updated by Riccardo De Contardi about 2 years ago

  • Status changed from Resolved to Closed

Also available in: Atom PDF