Controlled TextFields type bug

[ugreg]

Environment Information

• Package version(s)

"dependencies": {
    "@types/node": "^10.12.18",
    "@types/powerapps-component-framework": "^1.2.0",
    "office-ui-fabric-react": "^7.92.0",
    "react": "^16.12.0"
  }

Please provide a reproduction of the bug in a codepen:

Load the TextField samples for Controlled TextFields in codepen or in local text editor.

Actual behavior:

The Controlled TextField example uses incorrect types. The onchange methods private _onChangeX = (ev: React.FormEvent<HTMLInputElement>, newValue?: string) => { should instead be private _onChangeX = (ev: React.FormEvent<HTMLInputElement | HTMLTextAreaElement>, newValue?: string) => {.

[tsl] ERROR in D:\Form.tsx(40,10)
      TS2322: Type '(ev: React.FormEvent<HTMLInputElement>, newValue?: string | undefined) => void' is not assignable to type '(event: FormEvent<HTMLInputElement | HTMLTextAreaElement>, newValue?: string | undefined) => void'.
  Types of parameters 'ev' and 'event' are incompatible.
    Type 'FormEvent<HTMLInputElement | HTMLTextAreaElement>' is not assignable to type 'FormEvent<HTMLInputElement>'.
      Type 'HTMLInputElement | HTMLTextAreaElement' is not assignable to type 'HTMLInputElement'.
        Type 'HTMLTextAreaElement' is missing the following properties from type 'HTMLInputElement': accept, align, alt, checked, and 23 more.

ERROR in D:\Form.tsx

Expected behavior:

App builds, compiles, and starts.

Priorities and help requested:

Are you willing to submit a PR to fix? Yes

Requested priority: Normal

[xugao]

@gregdegruy - thanks for reporting! I will fix this.
FYI on why this issue - currently our fabric code doesn't compile with strictFunctionTypes: true. related issue: #10226.

[msft-github-bot]

🎉This issue was addressed in #11928, which has now been successfully released as office-ui-fabric-react@v7.93.0.:tada:

Handy links:

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