Fluentui: Dropdown type error when building with TypeScript 3.1.1

[joechung-msft]

Bug Report

• __Package version(s)__: 6.74.1
• __Browser and OS versions__: (fill this out if relevant)

Priorities and help requested:

Are you willing to submit a PR to fix? (Yes, No) No

Requested priority: (Blocking, High, Normal, Low) High

Products/sites affected: (if applicable)

Describe the issue:

When building a project using the Fabric Dropdown with TypeScript 3.1.1, there is a compilation error.

````ts
import { Dropdown, IDropdown } from "office-ui-fabric-react/lib/Dropdown";
import { Fabric } from "office-ui-fabric-react/lib/Fabric";
import * as React from "react";

export class App extends React.Component {
private dropdown: IDropdown | null = null;

focus() {
    if (this.dropdown) {
        this.dropdown.focus();
    }
}

render() {
    return (
        <Fabric>
            <Dropdown componentRef={dropdown => this.dropdown = dropdown} options={[]} />
        </Fabric>
    );
}

}
````

Actual behavior:

node_modules/office-ui-fabric-react/lib/components/Dropdown/Dropdown.types.d.ts(13,18): error TS2430: Interface 'IDropdownProps' incorrectly extends interface 'ISelectableDroppableTextProps<IDropdown>'. Types of property 'onChange' are incompatible. Type '((event: FormEvent<HTMLDivElement>, option?: IDropdownOption | undefined, index?: number | undefined) => void) | undefined' is not assignable to type '((event: FormEvent<IDropdown>) => void) | undefined'. Type '(event: FormEvent<HTMLDivElement>, option?: IDropdownOption | undefined, index?: number | undefined) => void' is not assignable to type '(event: FormEvent<IDropdown>) => void'. Types of parameters 'event' and 'event' are incompatible. Type 'FormEvent<IDropdown>' is not assignable to type 'FormEvent<HTMLDivElement>'. Type 'IDropdown' is not assignable to type 'HTMLDivElement'. Property 'align' is missing in type 'IDropdown'.

Expected behavior:

The project should compile without error like when using TypeScript 3.0.3.

Workarounds are to continue to use TypeScript 3.0.3 or to declare dropdown as any in the componentRef prop callback.

[huntwj]

Could it be as simple as changing the onChange declaration in IDropdownProps in Dropdown.types.d.ts?

I changed it to

  /**
   * Callback issued when the selected option changes.
   */
  onChange?: (event: React.FormEvent<IDropdown>, option?: IDropdownOption, index?: number) => void;

and was able to get my code to compile...

...BUT...

I haven't really thought through it to see if this has negative effects on others' existing code.

[dzearing]

@JasonGore any updates here? Do you see a fix, is this a bug? (can we remove needs triage)

[JasonGore]

Yes, I'm currently thinking this is a typing bug with ISelectableDroppableTextProps. The underlying issue is that ISelectableDroppableTextProps takes in only one generic type (component) but then assumes all listener elements are of that type. This causes issues with event listeners attached to HTML elements which are not technically IDropdown type.

I'm testing a fix where ISelectableDroppableText takes in 2 generic types (the second being optional for backwards compatibility), like this:

export interface ISelectableDroppableTextProps<TComponent, TListenerElement = TComponent> extends React.HTMLAttributes<TListenerElement> {

I'm thinking this will allow componentRef and such interfaces to continue to be of type TComponent while all event listeners are of type TListenerElement (in Dropdown's case, an HTMLDivElement.)

[JasonGore]

@joechung-msft Hi Joe, I have a PR out to fix, but I wanted to confirm with you that this is the only TS3.1 error you have encountered. Can you confirm that there are no other errors? Is there a way you can try my PR branch to confirm there are no other TS 3.1 errors? Thanks!

[msft-github-bot]

:tada:This issue was addressed in #6587, which has now been successfully released as [email protected].:tada:

Handy Links:

• Release Notes
• Official NPM Release
• Test the release with Developer Demo Site

[joechung-msft]

@JasonGore I didn't encounter any other TS 3.1 errors. Someone mentioned a KeytipData issue in the Teams thread:
````
../../node_modules/office-ui-fabric-react/lib-commonjs/components/KeytipData/KeytipData.d.ts:11:55 - error TS2559: Type 'IKeytipDataProps & IRenderComponent<{}>' has no properties in common with type 'IBaseProps'.

11 export declare class KeytipData extends BaseComponent ~~~~~~~~~~~
````

[JasonGore]

Thanks. I'll tackle that one via #6612.