Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Bug: Clicking Dropdown item makes Dropdown flicker/repaint due to collapse/expand happening #580

Open
sglebs opened this issue Sep 22, 2024 · 3 comments
Labels
bug Something isn't working

Comments

@sglebs
Copy link

sglebs commented Sep 22, 2024

Describe the bug
If you create a long Dropdown (say 7 items) you will see that when you click one of the elements there is an ugly UI flicker, a repaint. In fact, the menu/dropdown first collapses (as if the little triangle were clicked) and then expanded again and the clicked item is selected.

To Reproduce

Environment (please complete the following information):

  • Starlette-Admin version: 0.14.0
  • ORM/ODMs: SQLAlchemy, psycopg2-binary==2.9.9
  • SQLAlchemy-serializer==1.4.1

Additional context
N/A

@sglebs sglebs added the bug Something isn't working label Sep 22, 2024
@sglebs
Copy link
Author

sglebs commented Sep 22, 2024

I also noticed that if you click one of the other items and the Dropdown is collapsed, the Dropdown will expand also. It is as if it does not remember its state. Should I enter a separate issue? I already entered 3 bug reports for Dropdown today, so I figured there was no need.

@evgenybf
Copy link

evgenybf commented Sep 29, 2024

It flickers for me too. Also, when I click in a view from the drop down list, the list gets collapsed despite always_open=True

admin.add_view(
    DropDown(
        "Main",
        icon="fa fa-list",
        views=[
            UserView(User, identity="user"),
            UserEmailView(UserEmail, identity="email"),
        ],
        always_open=True,
    )
)

Online demo: https://starlette-admin-demo.jowilf.com/admin/mongoengine/category/list
It flickers when I select an item from the "Store" drop down.
FF 130.0.1, Chrome 129.0.6668.60

@evgenybf
Copy link

evgenybf commented Sep 29, 2024

<a class="nav-link dropdown-toggle {% if view.is_active(request) %}show{% endif %}"

Removing "show" here helps from closing the drop down when it looses focus. It still flickers, but only for the first time after the drop down is opened.

UPD: Checked with sqladmin. They use "active" instead of "show". It also gets collapsed and expanded on the first click.

https://github.com/aminalaee/sqladmin/blob/d99817aa25edf9039e381f42f5ea2a351457e012/sqladmin/templates/sqladmin/_macros.html#L4

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

2 participants