From 0a611dd0882af3bfe433f97a43f2de7c3e23151c Mon Sep 17 00:00:00 2001
From: mattcorner <matt.corner@ipg-automotive.com>
Date: Fri, 3 Apr 2020 09:18:49 +1000
Subject: [PATCH 1/3] [docs] sync state and input with name prop

---
 docs/src/pages/components/text-fields/FormattedInputs.js  | 5 +++--
 docs/src/pages/components/text-fields/FormattedInputs.tsx | 5 +++--
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/docs/src/pages/components/text-fields/FormattedInputs.js b/docs/src/pages/components/text-fields/FormattedInputs.js
index 83f15ff1b17876..97d1d9c3eb07a7 100644
--- a/docs/src/pages/components/text-fields/FormattedInputs.js
+++ b/docs/src/pages/components/text-fields/FormattedInputs.js
@@ -46,6 +46,7 @@ function NumberFormatCustom(props) {
       onValueChange={(values) => {
         onChange({
           target: {
+            name: props.name,
             value: values.value,
           },
         });
@@ -83,7 +84,7 @@ export default function FormattedInputs() {
         <Input
           value={values.textmask}
           onChange={handleChange}
-          name="formatted-text-mask-input"
+          name="textmask"
           id="formatted-text-mask-input"
           inputComponent={TextMaskCustom}
         />
@@ -92,7 +93,7 @@ export default function FormattedInputs() {
         label="react-number-format"
         value={values.numberformat}
         onChange={handleChange}
-        name="formatted-numberformat-input"
+        name="numberformat"
         id="formatted-numberformat-input"
         InputProps={{
           inputComponent: NumberFormatCustom,
diff --git a/docs/src/pages/components/text-fields/FormattedInputs.tsx b/docs/src/pages/components/text-fields/FormattedInputs.tsx
index 4738bf44aaf657..116936d3f44071 100644
--- a/docs/src/pages/components/text-fields/FormattedInputs.tsx
+++ b/docs/src/pages/components/text-fields/FormattedInputs.tsx
@@ -52,6 +52,7 @@ function NumberFormatCustom(props: NumberFormatCustomProps) {
       onValueChange={(values) => {
         onChange({
           target: {
+            name: props.name,
             value: values.value,
           },
         });
@@ -89,7 +90,7 @@ export default function FormattedInputs() {
         <Input
           value={values.textmask}
           onChange={handleChange}
-          name="formatted-text-mask-input"
+          name="textmask"
           id="formatted-text-mask-input"
           inputComponent={TextMaskCustom as any}
         />
@@ -98,7 +99,7 @@ export default function FormattedInputs() {
         label="react-number-format"
         value={values.numberformat}
         onChange={handleChange}
-        name="formatted-numberformat-input"
+        name="numberformat"
         id="formatted-numberformat-input"
         InputProps={{
           inputComponent: NumberFormatCustom as any,

From e5540193af1251fc5846a423f2722a2f9f2e0db6 Mon Sep 17 00:00:00 2001
From: mattcorner <matt.corner@ipg-automotive.com>
Date: Fri, 3 Apr 2020 16:17:25 +1000
Subject: [PATCH 2/3] Update types for name.

---
 docs/src/pages/components/text-fields/FormattedInputs.js  | 1 +
 docs/src/pages/components/text-fields/FormattedInputs.tsx | 3 ++-
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/docs/src/pages/components/text-fields/FormattedInputs.js b/docs/src/pages/components/text-fields/FormattedInputs.js
index 97d1d9c3eb07a7..e1d41ba6c09c0d 100644
--- a/docs/src/pages/components/text-fields/FormattedInputs.js
+++ b/docs/src/pages/components/text-fields/FormattedInputs.js
@@ -61,6 +61,7 @@ function NumberFormatCustom(props) {
 NumberFormatCustom.propTypes = {
   inputRef: PropTypes.func.isRequired,
   onChange: PropTypes.func.isRequired,
+  name: PropTypes.string.isRequired,
 };
 
 export default function FormattedInputs() {
diff --git a/docs/src/pages/components/text-fields/FormattedInputs.tsx b/docs/src/pages/components/text-fields/FormattedInputs.tsx
index 116936d3f44071..25a7d55b7a5b19 100644
--- a/docs/src/pages/components/text-fields/FormattedInputs.tsx
+++ b/docs/src/pages/components/text-fields/FormattedInputs.tsx
@@ -39,7 +39,8 @@ function TextMaskCustom(props: TextMaskCustomProps) {
 
 interface NumberFormatCustomProps {
   inputRef: (instance: NumberFormat | null) => void;
-  onChange: (event: { target: { value: string } }) => void;
+  onChange: (event: { target: { name: string; value: string } }) => void;
+  name: string;
 }
 
 function NumberFormatCustom(props: NumberFormatCustomProps) {

From 1deaf2502b9f0f21fca4a9c41d548dbd017aa0d3 Mon Sep 17 00:00:00 2001
From: mattcorner <matt.corner@ipg-automotive.com>
Date: Fri, 3 Apr 2020 16:32:19 +1000
Subject: [PATCH 3/3] [docs] transpile demo

---
 docs/src/pages/components/text-fields/FormattedInputs.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/src/pages/components/text-fields/FormattedInputs.js b/docs/src/pages/components/text-fields/FormattedInputs.js
index e1d41ba6c09c0d..fec01185dba329 100644
--- a/docs/src/pages/components/text-fields/FormattedInputs.js
+++ b/docs/src/pages/components/text-fields/FormattedInputs.js
@@ -60,8 +60,8 @@ function NumberFormatCustom(props) {
 
 NumberFormatCustom.propTypes = {
   inputRef: PropTypes.func.isRequired,
-  onChange: PropTypes.func.isRequired,
   name: PropTypes.string.isRequired,
+  onChange: PropTypes.func.isRequired,
 };
 
 export default function FormattedInputs() {