Search Support

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

Focus while clicking scrollbars

  • 1 reply
  • 0 have this problem
  • Last reply by Ashik T

more options

Issue Description: Typically, clicking on scroll bars doesn't cause the currently focused element to lose focus. However, when I click the scrollbar of an element with tabindex set to '-1', the focus is lost from the currently focused element. I'm unsure if this is the intended behavior or not, but it seems odd to me. I would appreciate it if someone could clarify whether this is a bug or intentional.

Steps to reproduce: 1. Focus on the input element. 2. Click on the scrollbar of the `ul` element.

You'll notice that the input element loses its focus. However, if you remove the `tabindex` attribute from the `ul` element and then click on the scrollbar, the input element retains its focus.

Sample code:

<input type='input'/>

  • option
  • option
  • option
  • option
  • option
  • option
  • option
  • option
  • option
  • option
  • option
  • option
  • option
  • option
  • option
  • option
  • option
  • option
  • option
  • option
  • option
  • option
  • option
  • option
  • option
  • option
  • option
  • option
  • option
  • option
'''Issue Description''': Typically, clicking on scroll bars doesn't cause the currently focused element to lose focus. However, when I click the scrollbar of an element with ''tabindex'' set to '-1', the focus is lost from the currently focused element. I'm unsure if this is the intended behavior or not, but it seems odd to me. I would appreciate it if someone could clarify whether this is a bug or intentional. '''Steps to reproduce''': 1. Focus on the input element. 2. Click on the scrollbar of the `ul` element. You'll notice that the input element loses its focus. However, if you remove the `tabindex` attribute from the `ul` element and then click on the scrollbar, the input element retains its focus. '''Sample code''': <input type='input'/> <ul style='height: 200px; overflow: scroll; width: 200px' tabindex='-1'> <li>option</li> <li>option</li> <li>option</li> <li>option</li> <li>option</li> <li>option</li> <li>option</li> <li>option</li> <li>option</li> <li>option</li> <li>option</li> <li>option</li> <li>option</li> <li>option</li> <li>option</li> <li>option</li> <li>option</li> <li>option</li> <li>option</li> <li>option</li> <li>option</li> <li>option</li> <li>option</li> <li>option</li> <li>option</li> <li>option</li> <li>option</li> <li>option</li> <li>option</li> <li>option</li> </ul>

All Replies (1)

more options

Apologies, the sample code got displayed here—it's something like this: " < input type='input'/> < ul style='height: 200px; overflow: scroll; width: 200px' tabindex='-1'>

 < li >option< / li >
 < li >option< / li >
 < li >option< / li >
 ....

< / ul> "

Modified by Ashik T

Helpful?

Ask a question

You must log in to your account to reply to posts. Please start a new question, if you do not have an account yet.