Ticket #4212 (closed bug: fixed)

Opened 7 years ago

Last modified 7 years ago

Tabs shoud NOT use togleClass() for .ui-state-hover

Reported by: onestone Owned by: klaus.hartl
Priority: minor Milestone: 1.7
Component: ui.tabs Version: 1.6rc6
Keywords: tabs hover focus Cc: onestone@…
Blocking: Blocked by:


Currently tabs (from latest SVN) binds the following function to mouseover and mouseout:

var handleState = function(state, el) {

if (el.is(':not(.ui-state-disabled)')) {

el.toggleClass('ui-state-' + state);



This breaks easily. I have no deterministing way to reproduce it, but very often after some playing with tabs, the state for a tab becomes "switched" incorrectly - i.e. it has -hover when the mouse is away, and no -hover when it's on top of it. This has happened to me many times, with various browsers.

Solution: Tabs should use addClass() and removeClass() for the appropriate event, not toggleClass().

The same thing probably applies for ui-state-focus as well.

Change History

comment:1 Changed 7 years ago by Cloudream

  • Priority changed from major to minor

Yes, this often happens when you move mouse quickly.

comment:2 Changed 7 years ago by klaus.hartl

  • Owner set to klaus.hartl
  • Status changed from new to assigned
  • Milestone changed from TBD to 1.7

comment:3 Changed 7 years ago by klaus.hartl

  • Status changed from assigned to closed
  • Resolution set to fixed


Note: See TracTickets for help on using tickets.