IE 8 compatibility issue

[GoogleCodeExporter]

What steps will reproduce the problem?
1. Use gwt-cal by inserting it into a div lower in your page
2. With or without events clicking on the calendar in IE8 scrolls the user back 
to the top of the page.
3.

What is the expected output? What do you see instead?
Expected: Not to scroll to the top
See instead: User scrolls to the top

What version of the product are you using? On what operating system?
0.9.4-SNAPSHOT on windows 7/IE9 using dev mode to render in IE8

Please provide any additional information below.

Original issue reported on code.google.com by BConoly on 6 Apr 2012 at 7:20

[GoogleCodeExporter]

Can you attach some file showing the problem?

Thanks

Original comment by ctasada on 17 Apr 2012 at 9:33

[GoogleCodeExporter]

Yep, attaching a screenshot for the initial state and then what happens when 
you click inside the calendar

Original comment by BConoly on 19 Apr 2012 at 1:58

Attachments:

• CalIE8DefectStep1.png
• CalIE8DefectStep2.png

[GoogleCodeExporter]

I see. I was thinking in some coding demo files so I could replicate, is it 
possible? Just to make sure I'm adding the gwt-cal in the same way.

Thanks

Original comment by ctasada on 19 Apr 2012 at 6:08

[GoogleCodeExporter]

It's pretty straight forward:

FlowPanel...
   - FlowPanel...
       - Top Content
   - FlowPanel
       - Calendar

The markup pretty much results in:
<div>
   <div>
      <!--top content-->
   </div>
   <div>
      <!--Calendar and buttons -->
   </div>
</div>

Calendar Setup:
        CalendarSettings settings = new CalendarSettings();
        settings.setWorkingHourStart(8);
        settings.setWorkingHourEnd(17);
        settings.setEnableDragDrop(false);
        settings.setEnableDragDropCreation(false);
        settings.setScrollToHour(7);
        settings.setPixelsPerInterval(15);
        cal.setSettings(settings);

        cal.setView(CalendarViews.DAY, 5);
        cal.scrollToHour(7);

We use MVP fairly heavily so it's hard to get you a straightforward code 
example...

Original comment by BConoly on 20 Apr 2012 at 8:49

[GoogleCodeExporter]

[deleted comment]

[GoogleCodeExporter]

Any news on this issue?  I just tested with 0.9.3 as well and the issue occurs 
there.

Original comment by BConoly on 2 May 2012 at 3:11

[GoogleCodeExporter]

I had a really busy week, I'm sorry. I'll attack it soon.

Original comment by ctasada on 2 May 2012 at 7:44

[GoogleCodeExporter]

Interesting, I just noticed that in firefox the calendar centers in the screen 
when it gets focused so I'm assuming that whatever's causing that could be the 
source of the IE issue.  Is there anyway to cut that functionality off?

Original comment by BConoly on 3 May 2012 at 6:31

[GoogleCodeExporter]

I may have found it although i don't think I can fix it myself without 
overriding the class on the classloader.  In the InteractiveWidget class it 
seems to add a FocusPanel to the RootPanel.  When the calendar is clicked it 
focuses on that FocusPanel causing the screen to jump depending on its 
location.  In my case I think IE's putting the focus panel at the top of the 
page while firefox/safari/ie9, etc are adding them nearer to the calendar 
itself.  I'll test it to see what I can find but I think this may be the 
culprit:

    /**
     * Makes the widget's focus panel invisible.
     */
    private void hideFocusPanel() {
        RootPanel.get().add(focusPanel);
        DOM.setStyleAttribute(focusPanel.getElement(), "position", "absolute");
        DOM.setStyleAttribute(focusPanel.getElement(), "top", "-10");
        DOM.setStyleAttribute(focusPanel.getElement(), "left", "-10");
        DOM.setStyleAttribute(focusPanel.getElement(), "height", "0px");
        DOM.setStyleAttribute(focusPanel.getElement(), "width", "0px");
    }

Original comment by BConoly on 9 May 2012 at 2:43

[GoogleCodeExporter]

Ok, without removing any of the existing functionality I was able to modify the 
InteractiveWidget class.  This will fix it for the time being but it would be 
great to have this changed in the core code so I can get rid of my custom class.

The changed class is attached.

Original comment by BConoly on 9 May 2012 at 4:44

Attachments:

• InteractiveWidget.java

[GoogleCodeExporter]

After applying your changes, the MonthView is not working anymore (tested with 
Firefox).

Original comment by ctasada on 11 May 2012 at 4:56

[GoogleCodeExporter]

Yeah, I just noticed that as well and I'm debugging as we speak, any ideas?

Original comment by BConoly on 11 May 2012 at 5:22

[GoogleCodeExporter]

Ok, I think I found it although I haven't been able to verify in IE yet.  You 
need to set the height of the mainRootPanel to 100% so that the absolute 
positioning works correctly:

        mainRootPanel.setHeight("100%");

Original comment by BConoly on 11 May 2012 at 5:35

[GoogleCodeExporter]

[deleted comment]

[GoogleCodeExporter]

Hi,

 I also facing same type of problem when Grid reloads data after selecting date pricker(from gwt date picker).
   I need to reload Grid with new data. I do not want to lose the scroll position in the Grid.I am using GWT. The problem only in IE7 & IE8 , But works fine in all browsers including IE9 .Please help me..thanks for help.. 

Original comment by raviraj....@gmail.com on 21 May 2012 at 11:04

[GoogleCodeExporter]

Hi raviraj,

Which gwt-cal and GWT versions are you using? Also, are you using "Standard 
Mode" or "Quirks Mode"?

Original comment by ctasada on 22 May 2012 at 9:50

[GoogleCodeExporter]

Hi,

I'm having this issue on firefox aswell. I also tried BConoly's patches for 
making a custom jar for the projects afected, without success. The calendar 
widget still gets focused on the first click for no good reason. Any ideas?

Original comment by macab...@gmail.com on 7 Aug 2012 at 12:05

[GoogleCodeExporter]

I'll add some more info: 

IE9 is also affected by this. When you click the calendar it resets the window 
scroll the the topmost position. When in firefox, the scroll resets to the 
downmost position.

Original comment by macab...@gmail.com on 9 Aug 2012 at 4:14

[GoogleCodeExporter]

Hi,
I also experience the issue:
O.S.  is Windows xp
browser: IE8 (browser mode ie8 and documents mode ie8 )
The scroll to top happens thanks to the focusPanel.setFocus(true); in 
InteractiveWidget.onBrowserEvent method.
Thanks,
Paolo

Original comment by plutt...@gmail.com on 9 Apr 2013 at 12:57

[GoogleCodeExporter]

issue still exists in trunk (r449).  Tried BConoly's suggested changes, but 
focus still jumped when scrolling the calendar in IE9.

Plutt is correct, just disabling all click to focus is an adequate workaround. 
(As long as you dont need to use keyboard navigation, etc.)

(patch highlighting workaround lines from modified r438 InteractiveWidget.java 
attached)

Original comment by brandona...@gmail.com on 20 Mar 2014 at 4:59

Attachments:

• InteractiveWidget_workaround.patch