Custom actions do not work when applied through a component that gets added to a union such as ControlType

[maxschulz-COL]

Description

The code below should to my understanding work, ie the dropdown value should be reflected in the Jumbotron subtitle.

from typing import Literal

from dash import html

import vizro.models as vm
from vizro import Vizro
from vizro.models.types import capture
from dash import callback, Input, Output

@capture("action")
def subtitle_changer(subtitle: str):
    """Custom action."""
    print("SUBTITLE",subtitle)
    return subtitle

# 1. Create new custom component
class Jumbotron(vm.VizroBaseModel):  
    """New custom component `Jumbotron`."""

    type: Literal["jumbotron"] = "jumbotron"  
    title: str  
    subtitle: str
    text: str

    def build(self):  
        return html.Div(
            [
                html.H2(self.title),
                html.H3(id = "subtitle_id_to_target",children=self.subtitle),
                html.P(self.text),
            ]
        )


# 2. Add new components to expected type - here the selector of the parent components
vm.Page.add_type("components", Jumbotron)
vm.Page.add_type("controls", vm.Dropdown)

page = vm.Page(
    title="Custom Component",
    components=[
        Jumbotron(  
            id="my_jumbotron",
            title="Jumbotron",
            subtitle="This is a subtitle to summarize some content.",
            text="This is the main body of text of the Jumbotron.",
        ),
vm.Card(id="my_card", text="Click on a point on the above graph."),
    ],
    controls=[vm.Dropdown(
        id = "my_dropdown",
        options = ["Subtitle 1", "Subtitle 2", "Subtitle 3"],
        multi = False,
        actions = [
            vm.Action(
                function = subtitle_changer(),
                inputs = ["my_dropdown.value"],
                outputs = ["subtitle_id_to_target.children"],
            ),
        ]
    )],
)

dashboard = vm.Dashboard(pages=[page])

Vizro().build(dashboard).run()

Expected behavior

Expected behaviour as described above.

Interestingly the custom action works when we use the Dropdown inside a Filter or Parameter and overwrite the pre-defined action there.

Defining a dash callback with the relevant Input and Output also works!

Which package?

vizro

Package version

0.1.14.dev0

Python version

3.9.12

OS

Mac

How to Reproduce

See above

Output

No response

Code of Conduct

• I agree to follow the Code of Conduct.

[petar-qb]

Solved with #478.