search

executablebooks / sphinx-tabs

Tabbed views for Sphinx
https://sphinx-tabs.readthedocs.io
MIT License
265 stars 68 forks source link

Tabs disappearing after being clicked #105

Closed jmd-dk closed 3 years ago

jmd-dk commented 3 years ago

Describe the bug

In 2.0.1 (after #101) we can (again) place images and more in tabs. However, the tabs behave badly if we stress test them by spam clicking on them for a while. In particular, all tabs except the left-most one disappears. I then have to reload the page for the other tabs to become visible again.

To Reproduce

I'm not sure if the images are in fact related to the problem, but I only see this behavior for the tabs in which I include images and math. The RST I use is in #101. I've uploaded the resulting HTML: Scroll down a bit and you see the tabs "Linux", "Windows", "macOS" and "Docker". Try spam clicking them, e.g. 5 times fast on "Linux", then once on "Windows", then once on "macOS", then 5 times on "Docker". For me, the bug appears like 4/5 times by doing so (and when not I just spam a little more).

Environment

foster999 commented 3 years ago

Thanks for the report, sounds like quite an odd one! Has it ever occurred under normal use?

jmd-dk commented 3 years ago

Thanks for the report, sounds like quite an odd one! Has it ever occurred under normal use?

Well I only saw it today. To be clear, I didn't set out to "stress test" it. It just happened after I clicked back and forth a few times, about a minute after upgrading to 2.0.1. So the bug doesn't show it's face rarely, it's quite easy to provoke. Please try out the attached HTML, I'm interested to see if it happens only on my system. :smiley:

nicozanf commented 3 years ago

I confirm the bug on version 2.0.1 (I don't know with others), See https://nicozanf.github.io/py4web-doc/en/master/chapter-03.html#installing-from-source-locally for another example - you just need to click one or two times on the tabs to face the bug ;-(

jmd-dk commented 3 years ago

I confirm the bug on version 2.0.1 (I don't know with others), See https://nicozanf.github.io/py4web-doc/en/master/chapter-03.html#installing-from-source-locally for another example - you just need to click one or two times on the tabs to face the bug ;-(

And using pure text too (no images)! Though both this and my example uses tabs for "Linux/macOS/Windows", I doubt this is a requirement for the bug to show itself :wink:

foster999 commented 3 years ago

Wow yeah, that live example breaks on first click when I try it on my phone! 😅

My PC won't turn on at the minute, but will investigate when it's back up and running

nicozanf commented 3 years ago

I've found that the problem at least in my case is related to the use of the bold style (with a double asterix) around the name of the tags.

i.e. it happens also with this simple test:

.. tabs::

   .. tab:: **Apples**

      Apples are green, or sometimes red.

   .. tab:: **Pears**

      Pears are green.

I was using the bold style in order to have a better visualization on the PDF ...

foster999 commented 3 years ago

Sorry it's taken a while for me to have a proper look!

So the sphinx-tabs JS hides the tab content for tabs which have not been selected. It seems like creating a nested element inside the tab label (e.g. bold or <strong>) causes it to hide the tab instead of its panel. For me, clicking on an image in your example tabs causes this every time. So we either need the JS to always hide the tab, or make sure that clicking anywhere on the tab registers as clicking on the text.

foster999 commented 3 years ago

Hey @jmd-dk and @nicozanf. If you have a moment, please could you give the branch under #106 a try and see if this works as expected?

jmd-dk commented 3 years ago

Hey @jmd-dk and @nicozanf. If you have a moment, please could you give the branch under #106 a try and see if this works as expected?

Thanks for the fixup - it seems to work nicely in my case(s)! :smiley:

Separate question: When clicking the same tab heading twice, none of the tabs are now selected, collapsing the main panel. I see that this is a new feature as of 2.0. Can it be disabled? If not "natively", then by some CSS magic or hacking on the final HTML?

foster999 commented 3 years ago

Awesome, glad that did the job 😁

Yeah I should have included an option when adding in really. I thought a sphinx conf option would work well? Shall see if I can sort that tomorrow and push a new version.

nicozanf commented 3 years ago

I've tested it, and the fix works fine also for me. Well done!

Thank you :thumbsup:

foster999 commented 3 years ago

Thanks again both, included this in v2.1.0 😁

jmd-dk commented 3 years ago

Thanks again both, included this in v2.1.0

I've adopted v2.1.0 and the published docs are up and running, using sphinx_tabs_disable_tab_closing = True :grinning: