Drag and Drop - how to disable the whole tree from scrolling up when clicked on

[sleimanji]

This question / problem was posted on StackOverflow earlier today.

The Fancytree drag and drop demo example (on the official website) has the problem too: when I click on a the tree's container (anywehre... on a node or on blank space) the div container jumps up.

While writing this post, I tested the scenario described below on three different browsers (Chrome v. 48.0.2564, Safari 9.0.1, Firefox 43.0.4) on Mac OS X El Capitan and the problem doesn't happen on Firefox but does happen on the other two browsers.

To replicate the problem:

1. Visit the Fancytree DnD demo example here: http://wwwendt.de/tech/fancytree/demo/#sample-ext-dnd.html.
2. Make the browser small enough so the tree in the page doesn't fit in its entirety.
3. When clicking on a node in the tree, the tree's container automatically scrolls up so its top is at the top of the page.

This is particularly a UX problem when I want to double-click on a node because the first click makes the tree jump so the second click goes somewhere unintended.

Environment

• Browser type and version: Chrome v. 48.0.2564 or Safari 9.0.1 (problem doesn't happen on Firefox 43.0.4)
• jQuery and jQuery UI versions: I think jQuery 1.12.1 and UI 1.11.1 (please check the above-mentioned demo page)
• Fancytree version: Please check the above mentioned demo page... I don't know what Fancytree version is used there. The problem happens as well on the version I downloaded today from GitHub
  enabled/affected extensions: DnD

[mar10]

Did you set the dnd.focusOnClick option (#270), and if so, what happens if you pass false there?

[sleimanji]

Thanks for the quick response! I did set dnd.focusOnClick to false and nothing changes: the problem (the div's jumping up) continues to happen on Chrome and Safari but not on Firefox.

This is the page I'm testing on: http://kfecms.sleimanmatar.com/test-fancyTree3.html

[sleimanji]

Martin, perhaps it is worth to try to set dnd.focusOnClick = false (now it is true) on the DnD demo sample page on your website (http://wwwendt.de/tech/fancytree/demo/#sample-ext-dnd.html). I can then test on my end too.

[mar10]

It seems to be a combination of tabindex="0" and using jQuery UI draggable, that causes this.
See this example (that does not use Fancytree at all):
https://plnkr.co/edit/xD4sEUAM6rr6whUEF8B1?p=preview

[sleimanji]

Yes, I see. Is there a default 'tabindex=0' embedded anywhere in the fancytree code? My webpage as well as your sample demo page don't contain tabindex=0.

[mar10]

Yes, tabindex is currently added, so the container behaves like a control and can receive keyboard focus.

I opened a ticket: https://bugs.jqueryui.com/ticket/14940

[mar10]

The jQuery team closed the ticket as notabug, so there is not much we can do.
However, if you remove the tabindex attribute from the container in the init event, does this solve your problem?

[kungfuenglish]

Apologies for the slow response, I've been on holiday.

Thanks for the tip on tabindex. I did comment out the following lines in jquery.fancytree.js and now it works!

// this.$container.attr("tabindex", this.options.tabbable ? "0" : "-1");
...
tabindex = ""; // opts.titlesTabbable ? " tabindex='0'" : "";

[mar10]

The next release will have an option tree.opts.tabindex="..." that allows to set this attribute. (tree.opts.tabbable will be deprecated.)

This settings

$("#ree").fancytree({
    ...
    tabindex: "",
    titlesTabbable: false
});

should fix your issue, but I assume it will break keyboard navigation.

[mar10]

Also related: #570

[judian]

Thanks,
It is useful for me.