My favorites | Sign in
Project Home Downloads
READ-ONLY: This project has been archived. For more information see this post.
Search
for
  Advanced search   Search tips   Subscriptions
Issue 154: IE shifts <a> tags into focus
4 people starred this issue and may be notified of changes. Back to list
Status:  Done
Owner:  ----
Closed:  Oct 2013


 
Reported by a5s...@gmail.com, Sep 30, 2010
Prerequisite: Using dynatree within a <div> element with limited width and 'overflow: auto'.

When clicking on a title that is too long to fit (or when the first title is too long on initial rendering), IE8 scrolls so that the <a> element (i.e., the title) either fits into the viewable area, or if wider than the viewable area, left adjusts the <a> element. This shifts the icons out of view.  Other browsers (e.g., Firefox, Chrome, Safari) behave as expected.

The issue can be replicated using http://wwwendt.de/tech/dynatree/doc/sample-quick.html by adding style="width: 100px; overflow: auto;"  to the <div> with id="tree".

The following code seems to trigger the behavior:

  this.span.getElementsByTagName("a")[0].focus();

and

  try { 
    $(this.span).find(">a").focus(); 
  } catch(e) { } 


Sep 30, 2010
Project Member #1 moo...@wwwendt.de
(No comment was entered for this change.)
Status: Accepted
Owner: moo...@wwwendt.de
Labels: Milestone-Release0.5.5
Nov 7, 2010
Project Member #2 moo...@wwwendt.de
v1.0 sets overflow:auto by default and supresses calls to focus when runnig on IE.
Status: Started
Labels: -Milestone-Release0.5.5 Milestone-Release1.0
Nov 14, 2010
Project Member #3 moo...@wwwendt.de
Hope it's still fixed. Please report if you face problems with 1.0
Status: Fixed
Mar 9, 2012
#4 spiky_...@yahoo.com
Still having this problem, with the latest stable release as well as with latest release candidate version.

I'm using dynatree to make a tree menu in a fixed width div. When clicking a node, IE shifts the dynatree horizontally. I'm using overflow hidden because I don't want scrollsbars, but this behaviour is unexpected.
Mar 12, 2012
#5 saber.mn...@gmail.com
I'm using latest dynatree plugin to view a tree in a fixed div. I still have the pb with ie8. Any suggestion is welcome.
Jul 17, 2012
Project Member #6 moo...@wwwendt.de
considered verified
Jul 17, 2012
Project Member #7 moo...@wwwendt.de
(No comment was entered for this change.)
Status: Verified
Dec 19, 2012
#8 nicolas....@gmail.com
Hello,

Same problem here. Occured in all Internet Explorer version with last dynatree version.
One possible workaround:

$('componentid').scrollLeft(0) on onSelect and onExpand events.

But this operation does a horrible visual effect.
Dec 19, 2012
Project Member #9 moo...@wwwendt.de
(No comment was entered for this change.)
Status: Accepted
Labels: -Milestone-Release1.0 Milestone-Release1.2.3
Jan 31, 2013
#10 sblendo...@gmail.com
I confirm that this issue is present on both Internet Explorer 9 and Internet Explorer 10.
Feb 10, 2013
Project Member #11 moo...@wwwendt.de
(No comment was entered for this change.)
Labels: -Milestone-Release1.2.3 Milestone-Release1.2.4
Feb 12, 2013
Project Member #12 moo...@wwwendt.de
1.2.4 was a hotfix
Labels: -Milestone-Release1.2.4 Milestone-Release1.2.5
Feb 18, 2013
#13 sblendo...@gmail.com
Just tried the 1.2.4, but the issue still persists. Tried on Internet Explorer 10.0.9200.16438
Sep 7, 2013
Project Member #14 moo...@wwwendt.de
(No comment was entered for this change.)
Labels: -Milestone-Release1.2.5 Milestone-Release1.2.x
Oct 6, 2013
Project Member #15 moo...@wwwendt.de
See also:
http://stackoverflow.com/questions/10280599/disable-scrolling-when-clicking-on-a-link

This event handler seemd to fix it (tested with IE 10)

    onClick: function(node, event) {
        event.preventDefault();
    },

Summary: IE shifts <a> tags into focus (was: IE8 shifts <a> tags into focus)
Status: Done
Owner: ---
Labels: -Milestone-Release1.2.x Milestone-Release1.2.5
Oct 2, 2014
#18 pundir.f...@gmail.com
I am using version 1.2.5 and i am still seeing this issue on IE11 and IE10.

I believe the reported issue had two portions:
1. when user click on hyperlink text - which is taken care partially by the fix provided.
if(!($.browser.msie && parseInt($.browser.version, 10) < 9)){
					aTag[0].focus();
				}
It should also include IE version 10 and 11 and future releases as well.

2. when user either click on expander icon or checkbox icon on node - this action triggers _onClick method which invokes focus on both of these icon clicks.

	focus: function() {
		// TODO: check, if we already have focus
//		this.tree.logDebug("dtnode.focus(): %o", this);
		this.makeVisible();
		try {
			$(this.span).find(">a").focus();
		} catch(e) { }
	},

This (">a").focus() should not be set for IE browser like the first issue fix.

If i change it to $(this.span).focus(), then it worked for all browsers without any issue.
As we are clicking on either of expander or checkbox icon, user might not want to focus on text which means setting focus on "a" should not be expected by all users of this grid. 

Please look into the second issue and provide us fix.


Powered by Google Project Hosting