✨ (entity selector) keep selected entities in options list

[sophiamersmann]

Resolves #3920

Keeps selected and unselected entities both in the list of entities to choose from.

I didn't remove the animation library because the animations make it look a bit smoother when the list of selected entities is in view.

Browsers like Chrome and Firefox are smart enough not to do a layout shift when a new entity is selected while the list of selected entities is not currently in view. But in other browsers like Safari, selecting a new entity always leads to a layout shift. The animation also helps here to make the layout shift a bit less jarring.

Marcel's point below is addressed :)

[sophiamersmann]

• ✨ (entity selector) keep selected entities in options list #4035 👈
• master

This stack of pull requests is managed by Graphite. Learn more about stacking.

Join @sophiamersmann and the rest of your teammates on Graphite

[owidbot]

Quick links (staging server):

Site	Admin	Wizard

Login: ssh owid@staging-site-entity-selector-animation

• Site-screenshots: https://github.com/owid/site-screenshots/compare/entity-selector-animation
• SVG tester: https://github.com/owid/owid-grapher-svgs/compare/entity-selector-animation

SVG tester:

Number of differences (default views): 0 ✅
Number of differences (all views): 0 ✅

Edited: 2024-10-22 12:04:20 UTC
Execution time: 1.31 seconds

[marcelgerber]

CleanShot.2024-10-09.at.14.23.35.mp4

One thing I did notice here is that the checkboxes are behaving weirdly when using keyboard navigation (i.e. tab and space).
Activation works fine, but they are at first still unchecked and only properly become checked once the next checkbox is toggled.

I'm seeing this in both Edge and Firefox.

[sophiamersmann]

This is just a draft implementation – I just changed as few lines as possible to get a staging site I could share.

If the problem you're describing also exists on prod, then probably worth opening an issue for it.

I'll keep this in mind though when I'm working on it :)

[marcelgerber]

Nice, and great that we can get rid of a load of code! 🐰

I found a few small things, but great work otherwise :)