Event from parent to child (v1.6.0)

[glomepe]

When I try to retrieve an event from a component declared as parent (or parent of parent, etc..), the child component doesn't seem to want to retrieve it.

It would be nice to have a feature that would allow to trigger an event launched in a parent component in a child.

• expected idea (from parent to child)

  <parent-component>
  <child-component data-action="parent-component.custom-event:child-component#childComponentMethod">
      <!-- some code here -->
  </child-component>
  </parent-component>

• code that works (from child to parent)

  <parent-component>
  <child-component data-action="child-event:parent-component#childComponentMethod">
      <!-- some code here -->
  </child-component>
  </parent-component>

I haven't found an equivalent way to do this kind of thing on catalyst, but it would be nice to have this kind of feature.

[glomepe]

This workaround is ugly but it work:

In your dom

<parent-component>
    <child-component data-targets="parent-component.bubbleables">
        <!-- some code here -->
    </child-component>
</parent-component>

In your parent component

import { controller, targets } from "@github/catalyst";

@controller
class ParentComponentElement extends HTMLElement {
    @targets bubbleables!: HTMLElement[];

    // call when you need to dispatch event to child
    private dispatchEventToBubbleables(eventName: BusEvents): void {
        const event = new CustomEvent(eventName);

        this.bubbleables.forEach((element) => element.dispatchEvent(event));
    }
}

In your child components

import { controller } from "@github/catalyst";

@controller
class ChildrenComponentElement extends HTMLElement {
    connectedCallback(): void {
        this.addEventListener('eventName', this.doSomething);
    }

    private doSomething(): void {
        console.log('event received 🤩🤩🤩');
    }
}

[keithamus]

Thanks for the issue!

Events should only go upwards, from children to parents. Parents can use direct communication via the child’s API - directly calling methods and accessing properties. You can use targets to help easily query child components and use their class methods.