Accordion: Doesn't render children except hardcoded AccordionTabs, no other elements and no AccordionTabs that are wrapped in another component

factoidforrest commented 7 months ago

Describe the bug

If I define a component with an accordion and in another file define an accordionTab, and try to render the tab in the accordion, it doesnt show up. Am I fundamentally misunderstanding something or is this just broken somehow? The sandbox shows it happening.

Reproducer

PrimeVue version

3.46.0

Vue version

3.x

Language

TypeScript

Build / Runtime

Vue CLI App

Browser(s)

No response

Steps to reproduce the behavior

You will see the tab not render, in that sandbox there should be two tabs but the list only renders one

Expected behavior

two tabs render

factoidforrest commented 7 months ago

Looking at the code, you can see the offending function pretty clearly:

      isAccordionTab(child) {
            return child.type.name === 'AccordionTab';
        },

and then used here

 tabs() {
            return this.$slots.default().reduce((tabs, child) => {
                if (this.isAccordionTab(child)) {
                    tabs.push(child);
                } else if (child.children && child.children instanceof Array) {
                    child.children.forEach((nestedChild) => {
                        if (this.isAccordionTab(nestedChild)) {
                            tabs.push(nestedChild);
                        }
                    });
                }

                return tabs;
            }, []);
        }

Obviously that works in the most basic of cases but doesn't work when the child is wrapped in another component, I'm not sure why. Also, the effect of just totally failing to render your child elements if they don't match the type you're expecting seems very brittle to me. I wouldn't ever expect a component library to do that.

I was able to hack around this by changing the "name" of my child component to "AccordionTab" which fixes the issue.

factoidforrest commented 7 months ago

I can see that this code was recently changed just three weeks ago, looks like by @mertsincan in https://github.com/primefaces/primevue/commit/40f231b1f5cb19f45de4e49427bb7dbd62ce3103

I assume if I revert to an earlier version it will fix it.

Edit: looks like earlier versions have a similar issue although it's getting beyond my knowledge at this point. Perhaps a maintainer can chime in

mertsincan commented 7 months ago

Hi,

Yes, I think it is the same as https://github.com/primefaces/primevue/issues/4646#issuecomment-1882003926 I'll try it in the future versions. Thanks a lot for your report!

james-cavanagh commented 4 months ago

Hi @mertsincan, is there an update on this issue please?

Additionally, is there a list of components that cannot be wrapped? Such a list would help me make an informed decision about whether PrimeVue is a suitable component library to pursue within my organisation. I hope it is, as, aside from the wrapping issue with several key components, it's fantastic. I just need to ensure its stability before discussing a Pro Support package.

james-cavanagh commented 3 months ago

Hi @mertsincan, is there an update on this issue, please? I have just noticed that I am also unable to wrap the StepperPanel due to a similar issue.

RebeccaStevens commented 2 months ago

I just came across this issue too. Here's a workaround that you can use for now:

import { MyAccordionTab, Accordion } from "#components";

// @ts-ignore
Accordion.methods.isAccordionTab = (child) => 
  child.type === MyAccordionTab;

// @ts-ignore
Accordion.computed.tabs = function tabs() {
  const tabs = [];
  const stack = this.$slots.default();
  do {
    const child = stack.pop();
    if (this.isAccordionTab(child)) {
      tabs.push(child);
    } else if (child.children && Array.isArray(child.children)) {
      stack.push(...child.children.reverse());
    }
  } while (stack.length > 0);

  return tabs;
};

primefaces / primevue