[Bug]: Impossible to use FormInput onChange prop in Typescript projects

[rraveendran-msft]

trafficstars

Library

React Northstar / v0 (@fluentui/react-northstar)

System Info

System:
    OS: Windows 10 10.0.22621
    CPU: (28) x64 Intel(R) Core(TM) i9-10940X CPU @ 3.30GHz
    Memory: 36.94 GB / 63.80 GB
  Browsers:
    Edge: Spartan (44.22621.521.0), Chromium (104.0.1293.70)
    Internet Explorer: 11.0.22621.1

Are you reporting Accessibility issue?

no

Reproduction

https://codesandbox.io/s/fluent-ui-example-forked-v4t3ic?file=/example.tsx

Bug Description

Actual Behavior

Typescript throws an error on the following code:

<FormInput
        label="First name"
        name="firstName"
        id="first-name"
        required
        showSuccessIndicator={false}
        onChange={(event) => setFname(event.target.value)}
      />

Typescript doesn't believe that event.target in this case has a value property. This is because the definition for ComponentEventHandler (https://github.com/microsoft/fluentui/blob/master/packages/fluentui/react-northstar/src/types.ts#L33) uses React.SyntheticEvent<HTMLElement>, which isn't guaranteed to have target.value.

However, React.SyntheticEvent<HTMLInputElement> is guaranteed to have target.value. Currently, if we want to use event.target.value in the FormInput, we need to use // @ts-ignore which is seems like a silly workaround when the type should just be correct in the first place.

Expected Behavior

We should be able to access event.target.value on FormInputs and other HTMLInputElements.

Logs

No response

Requested priority

Normal

Products/sites affected

No response

Are you willing to submit a PR to fix?

yes

Validations

• [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• [X] The provided reproduction is a minimal reproducible example of the bug.

[rraveendran-msft]

Solved this issue by using the data param rather than trying to get it through event.target.value.

However, this isn't documented anywhere on the page for Forms. Users shouldn't have to dig through library code to do something as simple as create a controlled component (which the docs for Form element don't have a single example for). https://fluentsite.z22.web.core.windows.net/0.64.0/components/form/definition

[khmakoto]

FYI @jurokapsiar

[layershifter]

@rraveendran-msft as a workaround, you can do type cast in this case, like that:

(event as React.ChangeEvent<HTMLInputElement>).target.value

[msft-fluent-ui-bot]

Because this issue has not had activity for over 150 days, we're automatically closing it for house-keeping purposes.

Still require assistance? Please, create a new issue with up-to date details.

[microsoft-github-policy-service[bot]]

Because this issue has not had activity for over 150 days, we're automatically closing it for house-keeping purposes.

Still require assistance? Please, create a new issue with up-to date details.