fix(FormControl): onChange and innerRef ts decls (#3583,#3568,#2781) (#…

…4435) - Added tests to simple.test.tsx
react-bootstrap · Oct 18, 2019 · 74a36bc · 74a36bc
1 parent 5051ef6
commit 74a36bc
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 5 deletions.
diff --git a/types/components/FormControl.d.ts b/types/components/FormControl.d.ts
@@ -2,14 +2,19 @@ import * as React from 'react';
 import Feedback from './Feedback';
 import { BsPrefixComponent } from './helpers';
 
+type FormControlElement =
+  | HTMLInputElement
+  | HTMLSelectElement
+  | HTMLTextAreaElement;
+
 export interface FormControlProps {
-  innerRef?: React.LegacyRef<this>;
+  innerRef?: React.LegacyRef<FormControlElement>;
   size?: 'sm' | 'lg';
   plaintext?: boolean;
   readOnly?: boolean;
   disabled?: boolean;
   value?: string;
-  onChange?: React.FormEventHandler<this>;
+  onChange?: React.FormEventHandler<FormControlElement>;
   type?: string;
   id?: string;
   isValid?: boolean;

diff --git a/types/simple.test.tsx b/types/simple.test.tsx
@@ -168,11 +168,24 @@ import {
 <Form>
   <Form.Group controlId="exampleForm.ControlInput1">
     <Form.Label>Email address</Form.Label>
-    <Form.Control type="email" placeholder="name@example.com" />
+    <Form.Control
+      type="email"
+      placeholder="name@example.com"
+      innerRef={React.createRef<HTMLInputElement>()}
+      onChange={(e: React.FormEvent<HTMLInputElement>) => {
+        e;
+      }}
+    />
   </Form.Group>
   <Form.Group controlId="exampleForm.ControlSelect1">
     <Form.Label>Example select</Form.Label>
-    <Form.Control as="select">
+    <Form.Control
+      as="select"
+      innerRef={React.createRef<HTMLSelectElement>()}
+      onChange={(e: React.FormEvent<HTMLSelectElement>) => {
+        e;
+      }}
+    >
       <option>1</option>
       <option>2</option>
       <option>3</option>
@@ -192,7 +205,14 @@ import {
   </Form.Group>
   <Form.Group controlId="exampleForm.ControlTextarea1">
     <Form.Label>Example textarea</Form.Label>
-    <Form.Control as="textarea" rows={3} />
+    <Form.Control
+      as="textarea"
+      rows={3}
+      innerRef={React.createRef<HTMLTextAreaElement>()}
+      onChange={(e: React.FormEvent<HTMLTextAreaElement>) => {
+        e;
+      }}
+    />
   </Form.Group>
   <Form.Group as={Row} controlId="exampleForm.HorizontalControl">
     <Form.Label column sm={2}>