widgetti / widgetti/ipyvuetify

v-select does not work as expected when used as Child Component with VuetifyTemplate

Open
#149 2 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
Python
Stars
355
Forks
61
PR merge metrics
No merged PRs in 30d

Description

I am not sure the problem is related only to v-select but it might be more general.
Below an example:

  1. I define a very simple Select component (WORKS)
import ipywidgets as widgets
import ipyvue as vue
from traitlets import Dict, Unicode, List
import ipyvuetify as v


select_template= '''
    <template>
    <v-row align="center">
        <v-col cols="4">
            <v-select :items="items" label="Test"></v-select>
        </v-col>
    </v-row>
    </template>
    <script>
    module.exports = {
        props: ["items"]
    }
    </script>
'''

class Select(v.VuetifyTemplate):
    items = List([]).tag(sync=True)
    template = Unicode(select_template).tag(sync=True)

Select(items=['a', 'b', 'c'])

image

  1. I put this component in a Main component using the Select class directly (DOESN'T WORK as expected)
    Clicking on the arrow to show the menu items is not working.
class Main(v.VuetifyTemplate):
    items = List([]).tag(sync=True)
    template = Unicode('''
        <template>
            <v-card>
                <v-card-title>Showing SubComponents</v-card-title>
                <my-select :items="items"/>
            </v-card>
        </template>
    ''').tag(sync=True)
    
    components=Dict({
        'my-select': Select,
    }).tag(sync=True, **v.VuetifyTemplate.class_component_serialization)

Main(items=['a', 'b', 'c'])

image

  1. I do the same thing but I specify the component as a string using template instead of using the Select class (WORKS)
class Main(v.VuetifyTemplate):
    items = List([]).tag(sync=True)
    template = Unicode('''
        <template>
            <v-card>
                <v-card-title>Showing SubComponents</v-card-title>
                <my-select :items="items"/>
            </v-card>
        </template>
    ''').tag(sync=True)
    
    components=Dict({
        'my-select': select_template,
    }).tag(sync=True, **v.VuetifyTemplate.class_component_serialization)

Main(items=['a', 'b', 'c'])

image

  1. Finally if I use the class as a component instead of the template string I am also experiencing the same problem of this issue on ipyvue about the events emitted by the Child not been sent to the Parent

Any help on this would be appreciated.
Many thanks
Gio

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 Select and Main examples from the issue, comparing the class component with the template-string component. Investigate the Select component registration and the child-to-parent event behavior described alongside ipyvue issue 28. Done means the nested v-select opens its menu and child events reach the parent as expected.

Written by the indexing model from the issue text.

Assessment

Tech stack
python
Domain
frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.