Core: Child components do not inherit props correctly

[vaelu]

Describe the bug

We noticed in the InputNumber component, that PrimeReact does not correctly inherit the props from the parent, so you don't have access to them in the PT you pass to children.

Problem

The InputNumber component has an input inside, which uses the InputText component. In the PT presets, this is the input property (https://github.com/primefaces/primereact/blob/master/components/lib/passthrough/tailwind/index.js#L808-L812).

In our case, we want to order the buttons and inputs with order-1, order-2 and order-3 (like it's done in styled mode). This means we need to style the InputText based on props of the InputNumber (props.showButtons && props.buttonLayout === "horizontal").

const pt = {
  input: {
    root: ({ props }: PInputNumberPassThroughMethodOptions) => ({
      className: classNames(INPUT_CLASSES, {
        'order-2': props.showButtons && props.buttonLayout === "horizontal"
      })
    })
  }
};

Unfortunately it seems that props in this case does not include showButtons or buttonLayout, because they are not inherited from their parent component InputNumber to InputText.

Workaround 1

I noticed that I can get the props with props.__parentMetadata.parent.props.showButtons and props.__parentMetadata.parent.props.buttonLayout, which is clearly wrong, becuase __parentMetadata looks like a private property.

const pt = {
  input: {
    root: ({ props }: PInputNumberPassThroughMethodOptions) => ({
      className: classNames(INPUT_CLASSES, {
        'order-2': props.__parentMetadata.parent.props.showButtons && props.__parentMetadata.parent.props.buttonLayout === 'horizontal'
      })
    })
  }
};

Workaround 2

Also, it's possible to rewrite the passthrough a bit, so that the props are passed in the parent PT (input) instead of the root PT of the input.

const pt = {
  input: ({ props }) => ({
    root: () => ({
      className: classNames(INPUT_CLASSES, {
        'order-2': props.showButtons && props.buttonLayout === "horizontal"
      })
    })
  })
};

This seems like a better solution to me than workaround 1, but still not a clean one, since TypeScript is erroring.

Is this behavior intentional? Is there any good solution for this?

cc @melloware @nitrogenous

Reproducer

https://stackblitz.com/edit/jiw5zb?file=src%2FApp.jsx

PrimeReact version

10.6.2

React version

18.x

Language

TypeScript

Build / Runtime

Vite

Browser(s)

No response

Steps to reproduce the behavior

No response

Expected behavior

No response

[vaelu]

Update

I found out, that we can pass parent instead of props and then use parent.props.

const pt = {
  input: {
    // FIXME: any type because parent is not available in InputTextPassThroughMethodOptions
    // eslint-disable-next-line @typescript-eslint/no-explicit-any
    root: ({ parent }: any) => ({
      className: classNames(INPUT_CLASSES, {
        'order-2': parent.props.showButtons && parent.props.buttonLayout === "horizontal"
      })
    })
  }
};

However, this still gives a TypeScript error, since parent is not available in InputTextPassThroughMethodOptions. Is there a way to solve this?

[melloware]

Yes if you look at Accordion.d.ts it has this...

/**
 * Custom passthrough(pt) option method.
 */
export interface AccordionTabPassThroughMethodOptions {
    props: AccordionTabProps;
    parent: AccordionPassThroughMethodOptions;
    context: AccordionContext;
}

I think we just need to add parent in the TS def.

[vaelu]

@melloware Probably, yes. TS definitions are written manually in PrimeReact, right?

[melloware]

Yes they are written manually and then the documentation is all generated off the TS. SO the website updates itself on build from the TS

[nrueckmann]

As a workaround (until a fix has been released), you could manually type hint the parent. Example:

export const Tailwind: PrimeReactPTOptions = {
  calendar: {
    input: {
      root: (options: InputTextPassThroughMethodOptions & { parent: CalendarPassThroughMethodOptions }) => ({
        className: "foobar"
      })
    }
  }
}