widgetti / widgetti/reacton

Element keys set with Reacton `.key(...)` are not recognized by the ipyvuetify transition group

Open
#36 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
Python
Stars
317
Forks
19
Avg merge
14m
Merged PRs (30d)
3

Description

Hello!
I'm not sure if this issue should be opened in reacton or ipyvuetify repository.
When I try to use Vuetify transition groups, I get an error in browser console saying:
[Vue warn]: <transition-group> children must be keyed: <v-dialog>

However I used a key method on reacton elements inside the group:

with rv.FadeTransition(group=True):
    if figures.raw_measurements:
        MplFigure(*figures.raw_measurements).key("raw_measurements")
    if figures.field_accuracy:
        MplFigure(*figures.field_accuracy).key("field_accuracy")
    if figures.calibration_moment:
        MplFigure(*figures.calibration_moment).key("calibration_moment")

(MplFigure here is a @reacton.component with rv.Dialog as the root element.)
Should the same keys be used by Vue in browser?

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Reproduce the warning with rv.FadeTransition(group=True) and keyed MplFigure components, using rv.Dialog as the root element. Start by tracing how Reacton’s .key(...) is passed to the ipyvuetify transition group; done when Vue recognizes the keys and no longer reports unkeyed transition-group children.

Written by the indexing model from the issue text.

Assessment

Tech stack
jupyter, python
Domain
frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.