FontAwesome: Typescript issue passing props

[jnoren1]

Describe the bug

It appears that Chip is not passing the key property down to its children? The following message is caused by the following code.

"Warning: Each child in a list should have a unique "key" prop.
Check the render method of Chip. "

 <Chip
          key={program.id}
          label={program.subgroup ? `${program.subgroup} - ${program.name}` : program.name}
          className="p-chip-rounded"
          removable
          removeIcon={
            <FontAwesomeIcon
              icon={faXmarkCircle}
              className="ml-2 text-red-400 hover:text-red-950 cursor-pointer"
              size="1x"
              onClick={(e) => {
                onProgramRemove(program);
                e.preventDefault();
              }}
            />
          }
          onRemove={() => onProgramRemove(program)}
        />

the following resolves the issue...

<Chip
         key={program.id}
         label={program.subgroup ? `${program.subgroup} - ${program.name}` : program.name}
         className="p-chip-rounded"
         removable
         removeIcon={
           <FontAwesomeIcon
             key={`${program.id}-${index}`}
             icon={faXmarkCircle}
             className="ml-2 text-red-400 hover:text-red-950 cursor-pointer"
             size="1x"
             onClick={(e) => {
               onProgramRemove(program);
               e.preventDefault();
             }}
           />
         }
         onRemove={() => onProgramRemove(program)}
       />

I use custom icons all over the place and never need to do this, so I think this is a failing of Chip. Not sure though.

Reproducer

https://stackblitz.com/edit/vitejs-vite-kn9li3?file=src%2FApp.tsx

PrimeReact version

10.6.3

React version

17.x

Language

TypeScript

Build / Runtime

Vite

Browser(s)

Chrome Latest

Steps to reproduce the behavior

run code, open console. see error. adding a key to the icon fixes it.

Expected behavior

no warning.

Also, the onRemove function does not seem to work with the custom icon. I expect that to work, but maybe I misunderstand it's purpose.

[melloware]

@jnoren1 can you try my reproducer: https://stackblitz.com/edit/vitejs-vite-tfhpc2?file=src%2FApp.tsx

You missed one step {...options.iconProps} I think https://primereact.org/customicons/#fontawesome

[jnoren1]

Wow, I've been using this library for about six years, and I never came across that specific piece of documentation. When we noticed the JSX indicators, we wondered if we could incorporate a custom Icon. Through trial and error it turned out we could, and we just went ahead with it without consulting the documentation. Your approach did indeed solve that issue. Miraculously, it also corrected the button callbacks, which had never quite worked as described. That's fantastic, thank you so much.

It opened up another more concerning error though. There is some typescript incompatibility going on with the size property and when forced it gave the following. I've added the callback style now to a lot of code and every single one takes issue with the size....

ProgramChips.tsx?t=1714800159507:20 Warning: Failed prop type: Invalid prop size of value 4 supplied to FontAwesomeIcon, expected one of ["2xs","xs","sm","lg","xl","2xl","1x","2x","3x","4x","5x","6x","7x","8x","9x","10x"].

I hacked it a wrapper function, but that does not seem ideal

    removeIcon={(i) => (
            <FontAwesomeIcon
              {...faExProps(i.iconProps)}
              key={`${program.id}-${index}`}
              icon={faXmarkCircle}
              className="ml-2 text-red-400 hover:text-red-950 cursor-pointer"
              size={"xl"}
            />
          )}

export const faExProps = (props: HTMLProps<unknown> | SVGProps<unknown>): { [key: string]: unknown; } => {
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  const { size, ...rest } = props as HTMLProps<unknown>;
  return rest;
};

[melloware]

@jnoren1 that is great. Do you have a suggestion how we could update the Typescript to make it flexible right now as you know its...

Right now the Typescript is.

/**
 * Icon options passed to any icon.
 * ComponentProps are props from the owning component.
 * AdditionalProps are any custom properties of an icon like SortIcon of the Datatable for example.
 */
export type IconOptions<ComponentProps, AdditionalProps> = AdditionalProps & {
    /**
     * Icon specific properties.
     */
    iconProps: React.HTMLProps<any> | React.SVGProps<any>;
    /**
     * The element representing the icon.
     */
    element: React.ReactNode;
    /**
     * Properties of the owning component.
     */
    props?: ComponentProps;
    [key: string]: any;
};

[melloware]

@jnoren1 can you check my PR I think I fixed it to FontAwesome size property will be respected. #6579

[melloware]

@jnoren1 10.6.6 is out if you want to check the new typescript typing?