[Bug]: Incorrect typescript for renderSelectedItem property of the Dropdown component

[petermoogk]

Package

@carbon/react

Browser

Firefox

Package version

v9.6.5

React version

v17.0.2

Description

The intention for the renderSelectedItem property of the Dropdown component is specified in PR #10188. It allows the user to specify a function that returns JSX element instead of the default string. However, the typescript for this property is currently defined as a function that returns string instead of a JSX element. This causes my React code to give an error since it specifies a function that returns a JSX element. I propose that the typescript be changed to:
renderSelectedItem?: React.JSXElementConstructor;

This is similar to what is being done for the itemToElement property

Reproduction/example

NA

Steps to reproduce

The Dropdown below will cause a typescript error, since the renderSelectedItem property is expecting a function that returns a string.
<Dropdown
id="someid"
titleText=""
hideLabel={true}
size="sm"
items={someItems}
label=""
renderSelectedItem={(item: { id: string; label: string }) => {
return

some text

}}
itemToElement={(item: { id: string; label: string }) => {
return

some text

}}
/>

Suggested Severity

Severity 2 = User cannot complete task, and/or no workaround within the user experience of a given component.

Application/PAL

No response

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate problems

[tay1orjones]

Thanks for opening this!

I propose that the typescript be changed to:
renderSelectedItem?: React.JSXElementConstructor;

I think that's a reasonable approach, feel free to put that into a PR and we can get it reviewed and merged.

[parthrc]

hey @tay1orjones can I work on this?

[sojinantony01]

I am still getting type error for renderSelectedItem in the latest versions.

Carbon Version - @carbon/react : 1.48.0
React version - 17.0.2

Error message

 Type '(item: ITableSchemaPath) => JSX.Element' is not assignable to type '(item: ITableSchemaPath) => JSXElementConstructor<ITableSchemaPath>'.

  Type 'Element' is not assignable to type 'JSXElementConstructor<ITableSchemaPath>'.ts(2322)

Dropdown.d.ts(105, 5): The expected type comes from property 'renderSelectedItem' which is declared here on type 'IntrinsicAttributes & Omit<DropdownProps<ITableSchemaPath> & { children?: ReactNode; } & RefAttributes<HTMLButtonElement>, "ref">' 

Element or ReactNode is not supporting.

[EAlexRojas]

Looks like the fix done was not correct, the renderSelectedItem is being declared as

  renderSelectedItem?(
    item: ItemType
  ): React.JSXElementConstructor<ItemType> | null;

This is saying that renderSelectedItem is a function that takes item as parameter an returns a JSXElementConstructor... which is not correct. It should be a function that returns a ReactNode. So it should be rather:

renderSelectedItem?(item: ItemType): ReactNode;

(React.JSXElementConstructor is ok for the case of itemToElement in that same file because it's saying that itemToElement is a JSXElementConstructor, which is correct as it's a function that returns a ReactNode.)