Defect #33392

Fix invalid selector in function displayTabsButtons()

Added by Marius BALTEANU 6 months ago. Updated 6 months ago.

Status:ClosedStart date:
Priority:NormalDue date:
Assignee:Go MAEDA% Done:

0%

Category:Code cleanup/refactoring
Target version:4.2.0
Resolution:Fixed Affected version:4.0.0

Description

Below it's a snippet from displayTabsButton() function:

    var bw = $(el).parents('div.tabs-buttons').outerWidth(true);

    if ((tabsWidth < el.width() - bw) && (lis.length === 0 || lis.first().is(':visible'))) {
      el.find('div.tabs-buttons').hide();
    } else {
      el.find('div.tabs-buttons').show().children('button.tab-left').toggleClass('disabled', numHidden == 0);
    }

Selector parents('div.tabs-buttons') from line var bw = $(el).parents('div.tabs-buttons').outerWidth(true); never finds any element because div.tabs-buttons is not a parent of div.tabs.

On jQuery 2, var gw = $(el).parents('div.tabs-buttons').outerWidth(true); is null which means 0+.
On jQuery 3, var gw = $(el).parents('div.tabs-buttons').outerWidth(true); is undefined which means NaN.

Because of this change, the condition (tabsWidth < el.width() - bw) always return false on jQuery 3 because gw is NaN and tabsButton are displayed.

The attach patch fixes this incorrect behaviour and also replaces some inline styles with class hidden.

tabs.png (79 KB) Marius BALTEANU, 2020-05-02 16:08

different-behavior-before.png (36 KB) Go MAEDA, 2020-05-03 02:18

different-behavior-after.png (36.9 KB) Go MAEDA, 2020-05-03 02:18

0001-Fix-invalid-selector-in-displayTabsButtons-function_v2.patch Magnifier (569 Bytes) Marius BALTEANU, 2020-05-03 08:34

1120.png (80.5 KB) Marius BALTEANU, 2020-05-03 08:39

1141.png (79.8 KB) Marius BALTEANU, 2020-05-03 08:42


Related issues

Related to Redmine - Feature #33383: Update jQuery to 3.5.1 Resolved

Associated revisions

Revision 19748
Added by Go MAEDA 6 months ago

Fix invalid selector in function displayTabsButtons() (#33392).

Patch by Marius BALTEANU.

History

#1 Updated by Marius BALTEANU 6 months ago

  • Description updated (diff)
  • Target version changed from 4.2.0 to 4.0.8
  • Affected version set to 4.0.0

#2 Updated by Marius BALTEANU 6 months ago

#3 Updated by Marius BALTEANU 6 months ago

  • Target version changed from 4.0.8 to 4.2.0

#4 Updated by Go MAEDA 6 months ago

I found that the patch changes the behavior of the button.

After applying the patch, the buttons show up even when there are no hidden tabs.

Before:

After:

#5 Updated by Marius BALTEANU 6 months ago

  • File deleted (0001-Fix-invalid-selector-in-displayTabsButtons-function.patch)

#6 Updated by Marius BALTEANU 6 months ago

I've removed from the patch the changes related to the "hidden" class because are irrelevant. Please retest it because on my environment I cannot reproduce the problem on all resolutions.

The problem that you say reproduces only on widths between 1120px - 1140px:
1120px Tab buttons appear:

1141px Tab buttons disappear :

Is it correct?

#7 Updated by Go MAEDA 6 months ago

  • Status changed from New to Closed
  • Assignee set to Go MAEDA
  • Resolution set to Fixed

Committed the patch. Thank you.

#8 Updated by Marius BALTEANU 6 months ago

Go MAEDA wrote:

Committed the patch. Thank you.

Thanks for committing this. FTR, we can easily fix the issue with those 20px, but working on it, I've found multiple issues, for example: resize the window, navigate to right until "+" and "Overview" tabs are hidden, then expand the window to the maximum. Observe that the hidden tabs are not automatically displayed even if it's enough space. I decided to try to find a better solution, but it'll take some time.

Also available in: Atom PDF