Fix #2620: pass standard props to the wrapping element

[kalinkrustev]

The approach of passing

{...ObjectUtils.findDiffKeys(this.props, ComponentX.defaultProps)}

to the wrapping div/span relies on defaultProps having all the props of ComponentX listed there, otherwise some props will be also passed to the wrapping div/span element. I checked if this is so for some of the components and it look it is.

[kalinkrustev]

Fixes #2620

[mertsincan]

Good job, @kalinkrustev ;)

[melloware]

@kalinkrustev i did find one issue upgrading from 7.2.1 to 8.0.0 that maybe you can help me with.

I have a custom component that I wrap PrimeReact AutoComplete like this...

/**
 * Properties for this component which extends PrimeReact AutoComplete.
 */
export interface ActiveDirectoryAutocompleteProps extends AutoCompleteProps {
    value?: ActiveDirectoryUser | ActiveDirectoryUser[];
    suggestions?: ActiveDirectoryUser[];
}

/**
 * JSON object which represents the users in the dropdown.
 */
export interface ActiveDirectoryUser {
    givenName?: string;
    surname?: string;
    jobTitle?: string;
    location?: string;
}

/**
 * Autocomplete for displaying users from Active Directory.
 * 
 * @param {ActiveDirectoryAutocompleteProps} props properties to configure this component
 * @returns {ActiveDirectoryAutocomplete} component
 */
export const ActiveDirectoryAutocomplete = (props: ActiveDirectoryAutocompleteProps) => {

    const selectedItemTemplate = (item: ActiveDirectoryUser) => {
        return `${item.firstName} ${item.lastName}`;
    }

    const itemTemplate = (item: ActiveDirectoryUser) => {
        return (
            <span className="add-user-item flex">
                <div className="flex-initial flex align-items-center justify-content-center">
                    <LetterAvatar fullname={`${item.firstName} ${item.lastName}`} />
                </div>
                <div className="ml-3">
                    <div className="w-full">
                        <span className="block font-bold white-space-nowrap">{item.firstName} {item.lastName}</span>
                    </div>
                    <div style={{ color: "var(--text-color-secondary)" }}>
                        <span className="block text-overflow-ellipsis">{item.email} | {item.jobTitle} | {item.location}</span>
                    </div>
                </div>
            </span>
        );
    }

    return (
        <AutoComplete
            selectedItemTemplate={selectedItemTemplate}
            itemTemplate={itemTemplate}
            delay={400}
            placeholder={!props.value ? "Start typing user name" : ''}
            {...props}
        />
    )
}

However now when I am passing {...props} to do property expansion its failing to compile with... This works in 7.2.1 but now doesn't like it even though above I am extends AutoCompleteProps.

src/components/misc/ActiveDirectoryAutocomplete.tsx:77:10 - error TS2769: No overload matches this call.
  Overload 1 of 2, '(props: AutoCompleteProps | Readonly<AutoCompleteProps>): AutoComplete', gave the following error.
    Type '{ id?: string | undefined; inputRef?: Ref<HTMLInputElement> | undefined; value?: any; name?: string | undefined; type?: string | undefined; suggestions?: any[] | undefined; ... 316 more ...; width?: string | ... 1 more ... | undefined; }' is not assignable to type 'IntrinsicClassAttributes<AutoComplete>'.
      Types of property 'ref' are incompatible.
        Type 'LegacyRef<HTMLSpanElement> | undefined' is not assignable to type 'LegacyRef<AutoComplete> | undefined'.
          Type '(instance: HTMLSpanElement | null) => void' is not assignable to type 'LegacyRef<AutoComplete> | undefined'.
            Type '(instance: HTMLSpanElement | null) => void' is not assignable to type '(instance: AutoComplete | null) => void'.
              Types of parameters 'instance' and 'instance' are incompatible.
                Type 'AutoComplete | null' is not assignable to type 'HTMLSpanElement | null'.
                  Type 'AutoComplete' is missing the following properties from type 'HTMLSpanElement': addEventListener,

Any thoughts?

The change was this

export interface AutoCompleteProps extends Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, 'onChange' | 'onSelect'> {

[kalinkrustev]

I did not try to extend all the components that were modified in this request.
I only followed the pattern from some of the components, that were already passing all properties.
It seems in some (or maybe all the cases) we have to omit the 'ref' property in the definition file.

I tried adding 'ref' to AutoComplete.d.ts:

export interface AutoCompleteProps extends Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, 'onChange' | 'onSelect' | 'ref'>

And it seems this solves the issue.
I can see 'ref' was omitted in other components too, but I am not that familiar with these tricks.

[kalinkrustev]

Meanwhile I think you can do this:

export const ActiveDirectoryAutocomplete = (props: Omit<ActiveDirectoryAutocompleteProps, 'ref'>) => {

Until we figure out a proper fix within Primereact.

[melloware]

Let me try that!

[melloware]

The above looks like its working.

[mertsincan]

Hi @melloware,
Could you please create a new issue about it?

[melloware]

yep!