Declaration for FormControlProps.onChange is incorrect

[AndriySvyryd]

@observer
class InputForm extends React.Component<IInputFormProps, {}> {
    @observable outgoingMessage: string = '';

    @action.bound
    handleChange(event: ReplaceProps<"input", BsPrefixProps<"input"> & FormControlProps>) {
        this.outgoingMessage = event.target.value;
    }

    @action.bound
    handleSubmit(event: React.FormEvent<HTMLFormElement>) {
        this.props.sendMessage(this.outgoingMessage);
        this.outgoingMessage = '';
        event.preventDefault();
    }

    render() {
        return <Form inline noValidate onSubmit={this.handleSubmit} autoComplete="off">
            <Form.Control
                type="text"
                name="outgoingMessage"
                value={this.outgoingMessage}
                onChange={this.handleChange}
            />
            <Button type="submit">Send</Button>
        </Form>;
    }
}

interface IInputFormProps {
    sendMessage: (outgoingMessage: string) => void;
}

TS2339: Property 'target' does not exist on type 'ReplaceProps<"input", BsPrefixProps<"input"> & FormControlProps>'.

[mattvonb]

I'm facing this problem as well. (I think.)

With react-bootstrap 0.32.4, I would define the onChange handler with type:

(event: React.FormEvent<FormControl & HTMLInputElement>) => void

If I try this with react-boostrap 1.0.0-beta.6, I get the following compiler error:

Type '(event: FormEvent<Form<"input"> & HTMLInputElement>) => void' is not assignable to type '(event: FormEvent<ReplaceProps<"input", BsPrefixProps<"input"> & FormControlProps>>) => void'.
  Types of parameters 'event' and 'event' are incompatible.
    Type 'FormEvent<ReplaceProps<"input", BsPrefixProps<"input"> & FormControlProps>>' is not assignable to type 'FormEvent<Form<"input"> & HTMLInputElement>'.
      Type 'ReplaceProps<"input", BsPrefixProps<"input"> & FormControlProps>' is not assignable to type 'Form<"input"> & HTMLInputElement'.
      Type 'Pick<DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref" | "key" | "autoComplete" | "name" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | ... 271 more ... | "width"> & BsPrefixProps<...> & FormControlProps' is missing the following properties from type 'Form<"input">': context, setState, forceUpdate, render, and 3 more.ts(2322)
FormControl.d.ts(14, 3): The expected type comes from property 'onChange' which is declared here on type 'IntrinsicAttributes & IntrinsicClassAttributes<Form<"input">> & Readonly<ReplaceProps<"input", BsPrefixProps<"input"> & FormControlProps>> & Readonly<{ children?: ReactNode; }>'

I can get rid of this error by modifying the type of function to be just:

(event: React.FormEvent<FormControl>) => void

but then I can't access any of the input element fields on event.currentTarget. For example:

export interface Props {
  planet?: string;
}

interface State {
  planet: string;
}

export class Hello extends React.Component<Props, State> {
  constructor(props: Props) {
    super(props);
    this.state = { planet: props.planet || "" }
  }

  public render() {
    return (
     <form>
       <FormGroup>
         <FormControl name="planet" type="text" value={this.state.planet}
                      onChange={this.handleChange} />
       </FormGroup>
     </form>
    );
  }

  private handleChange = (event: React.FormEvent<FormControl>) => {
    const state = {...this.state};
    const name = event.currentTarget.name;
    state[name] = event.currentTarget.value;
    this.setState(state);
  };
}

results in the following compiler error: Property 'name' does not exist on type 'EventTarget & Form<"input">'.ts(2339).

Interestingly, if instead of a FormControl, I use a Form.Check, then my code works as it did with react-bootstrap 0.32.4:

export interface Props {
  enabled?: boolean;
}

interface State {
  enabled: boolean;
}

export class HelloCheck extends React.Component<Props, State> {
  constructor(props: Props) {
    super(props);
    this.state = { enabled: this.props.enabled || true };
  }

  public render() {
    return (
     <form>
       <FormGroup>
         <Form.Check type="checkbox"
                     name="enabled"
                     label="Enabled"
                     checked={this.state.enabled}
                     onChange={this.handleChange} />
        </FormGroup>
     </form>
    );
  }

  private handleChange = (event: React.ChangeEvent<FormControl & HTMLInputElement>) => {
    const state = {...this.state};
    const name = event.currentTarget.name;
    state[name] = event.currentTarget.checked;
    this.setState(state);
  };
}

[afeinman]

I'm also encountering this. Even lovelier would be if there were a simple type alias for React.ChangeEvent<FormControl & HTMLInputElement> as that's a bit cumbersome to remember and type each time.

[moiri]

I also have this problem. For now, to avoid the error I cast the event type:

onChange: (event:React.ChangeEvent<FormControl>) => {
     const castEvent = event as unknown as React.ChangeEvent<HTMLInputElement>;
     setValue(castEvent.target.value);
}

[kosmiq]

@jquense can this be closed after the commit?