0

I'm working on an application that has a side panel and main timeline view. Users are to be able to select an item from the side panel and drag it into the timeline view.

To drag the item, the user presses and holds the left mouse button down, and drags the item to the timeline view. The user should now be able to use arrow keys to scroll the time line up and down, however when these buttons are pressed the side panel is scrolled instead. On mousedown I've tried to set the focus to my timeline element but that is not working.

onMouseDown = () => {
  ...
  document.getElementById('timeLine').focus() // does not change the focus to the timeline
}

Is it possible to force the browser to change focus while the mouse button is being held down? My current fix is to force an animation to scroll the timeline view using jQuery, but this is results in quite a slow animation compared to a real browser scroll event.

adam.k
  • 622
  • 3
  • 15

2 Answers2

1

Only certain HTML Elements can be focused, such as non-disabled inputs, iFrames, non-disabled-buttons, and anchors (links) which have an href property.

To allow other elements to be focusable you must give them a tab index. To have the browser automatically calculate the correct tabindex you should use tabindex = 0 in your html for your timeline element. This should fix your issue.

A quickly thrown together example is here. If you delete the tabindex = 0 then you'll notice the jQuery focus command stops working https://codepen.io/kaisalmon/pen/BaNVmbL

EDIT: If you are using mousedown (but not click or mouseup also prevent the event's default action using:

    $('#timeline').focus();
    e.preventDefault();
Kai Salmon
  • 338
  • 1
  • 2
  • 9
  • This is close but not quite there. My mouse action can't be a 'click' it needs to be on 'mousedown'. Unfortunately when I change your code pen example from click to mousedown it doesn't work – adam.k Mar 18 '20 at 11:06
  • If you are using mouse down you must add `e.preventDefault` in the event handler since the events default action is to defocus. https://codepen.io/kaisalmon/pen/BaNVmbL – Kai Salmon Mar 18 '20 at 11:29
0

You have to check first weather that content appears on the screen or not using onScroll() function or any other source. After that you have to add active class in that tab or focus that tab which content appears on the screen.

For finding weather the content appears on the screen or not for focus on particular element from timeline follow the link to get the content appears on scroll How to Check if element is visible after scrolling?

sr_shubh
  • 31
  • 5