flet-dev / flet

Flet enables developers to easily build realtime web, mobile and desktop apps in Python. No frontend experience required.
https://flet.dev
Apache License 2.0
10.92k stars 420 forks source link

Tabs are breaking in combination with navigation bar #2109

Open aurosevic opened 10 months ago

aurosevic commented 10 months ago

Description After changing the view using the navigation bar to another 'NavigationDestination' and then returning to the one with tabs, the tabs completely break and become unresponsive. This issue occurs consistently every time I follow this sequence.

https://github.com/flet-dev/flet/assets/19304661/570a9520-8a5b-4823-b5e5-247a6de7a73b

Code example to reproduce the issue:

flet run app.py --verbose

Describe the results you received:

Describe the results you expected:

Additional information you deem important (e.g. issue happens only occasionally):

Flet version (pip show flet):

Name: flet
Version: 0.12.2
Summary: Flet for Python - easily build interactive multi-platform apps in Python
Home-page: 
Author: Appveyor Systems Inc.
Author-email: hello@flet.dev
License: Apache-2.0
Location: /home/andrija/PycharmProjects/finance-buddy/venv/lib/python3.10/site-packages
Requires: cookiecutter, flet-runtime, packaging, qrcode, watchdog, websocket-client, websockets
Required-by: 

Operating system:

KDE Neon 5.27

Additional environment details:

(venv) andrija@multiverse:~/PycharmProjects/finance-buddy$ pip list
Package                Version
---------------------- ------------
annotated-types        0.6.0
anyio                  4.0.0
arrow                  1.3.0
binaryornot            0.4.4
certifi                2023.7.22
chardet                5.2.0
charset-normalizer     3.3.2
click                  8.1.7
colorama               0.4.6
contourpy              1.1.1
cookiecutter           2.4.0
copier                 8.3.0
cycler                 0.12.1
decorator              5.1.1
dunamai                1.19.0
exceptiongroup         1.1.3
flet                   0.12.2
flet-core              0.12.2
flet-runtime           0.12.2
fonttools              4.43.1
funcy                  2.0
h11                    0.14.0
httpcore               0.17.3
httpx                  0.24.1
idna                   3.4
Jinja2                 3.1.2
jinja2-ansible-filters 1.3.2
kiwisolver             1.4.5
markdown-it-py         3.0.0
MarkupSafe             2.1.3
matplotlib             3.8.0
mdurl                  0.1.2
numpy                  1.26.0
oauthlib               3.2.2
packaging              23.2
pandas                 2.1.1
pathspec               0.11.2
Pillow                 10.1.0
pip                    23.3.1
plumbum                1.8.2
prompt-toolkit         3.0.36
pydantic               2.4.2
pydantic_core          2.10.1
Pygments               2.16.1
pyparsing              3.1.1
pypng                  0.20220715.0
python-dateutil        2.8.2
python-slugify         8.0.1
pytz                   2023.3.post1
PyYAML                 6.0.1
pyyaml-include         1.3.1
qrcode                 7.4.2
questionary            2.0.1
repath                 0.9.0
requests               2.31.0
rich                   13.7.0
seaborn                0.13.0
setuptools             65.5.1
six                    1.16.0
sniffio                1.3.0
text-unidecode         1.3
types-python-dateutil  2.8.19.14
typing_extensions      4.8.0
tzdata                 2023.3
urllib3                2.1.0
watchdog               3.0.0
wcwidth                0.2.8
websocket-client       1.6.4
websockets             11.0.3
wheel                  0.38.4
ndonkoHenri commented 10 months ago

Can you attach the app's code?

aurosevic commented 10 months ago

Hey @ndonkoHenri, sure!

Here's a link to a smaller version of the project mentioned above: https://gist.github.com/aurosevic/8cc6c2713be2fb020fc492781a7c567e

I've identified the problem, but I'm still searching for a solution. The issue arises from line 18 in the provided gist, causing the Tabs structure to break. When ScrollMode is defined on the same page as Tabs, Tabs do not function properly.

This becomes problematic when I want to have Tabs and some other elements simultaneously on a page. Do you know the reason behind this behavior, and is there a solution other than restricting the use of ScrollMode on pages with Tabs?

aurosevic commented 10 months ago

@FeodorFitsner @ndonkoHenri Any idea what could be the problem?

Currently, I set the scroll to None each time the user selects a page containing Tabs. While this approach works, it appears inelegant in the code.