Skip to content

Commit

Permalink
TextField example: fix onChange typing error when strictFunctionTypes…
Browse files Browse the repository at this point in the history
… is true (#11928)

#### Pull request checklist

- [x] Addresses an existing issue: Fixes #11927
- [x] Include a change request file using `$ yarn change`

#### Description of changes
Fix the typing error for `onChange` inside TextField examples when `strictFunctionTypes` is set to `true`
```
      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.
```
  • Loading branch information
xugao authored Feb 12, 2020
1 parent 162b292 commit e0ceea9
Show file tree
Hide file tree
Showing 3 changed files with 12 additions and 3 deletions.
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
{
"type": "patch",
"comment": "TextField example: fix onChange typing error when strictFunctionType is true",
"packageName": "office-ui-fabric-react",
"email": "xgao@microsoft.com",
"commit": "3602dd11de72d6b10d60bc5eeb624175d8cec8eb",
"dependentChangeType": "patch",
"date": "2020-02-12T03:45:19.262Z"
}
Original file line number Diff line number Diff line change
Expand Up @@ -30,11 +30,11 @@ export class TextFieldControlledExample extends React.Component<{}, ITextFieldCo
);
}

private _onChange1 = (ev: React.FormEvent<HTMLInputElement>, newValue?: string) => {
private _onChange1 = (event: React.FormEvent<HTMLInputElement | HTMLTextAreaElement>, newValue?: string) => {
this.setState({ value1: newValue || '' });
};

private _onChange2 = (ev: React.FormEvent<HTMLInputElement>, newValue?: string) => {
private _onChange2 = (event: React.FormEvent<HTMLInputElement | HTMLTextAreaElement>, newValue?: string) => {
if (!newValue || newValue.length <= 5) {
this.setState({ value2: newValue || '' });
} else {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ export class TextFieldMultilineExample extends React.Component<{}, ITextFieldMul
);
}

private _onChange = (ev: any, newText: string): void => {
private _onChange = (ev: React.FormEvent<HTMLInputElement | HTMLTextAreaElement>, newText: string): void => {
const newMultiline = newText.length > 50;
if (newMultiline !== this.state.multiline) {
this.setState({ multiline: newMultiline });
Expand Down

0 comments on commit e0ceea9

Please sign in to comment.