[docs] Fix masked text field bug (#20397)

mui · Apr 3, 2020 · 7c37586 · 7c37586
1 parent 7bb8c2c
commit 7c37586
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 5 deletions.
diff --git 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,
           },
         });
@@ -59,6 +60,7 @@ function NumberFormatCustom(props) {
 
 NumberFormatCustom.propTypes = {
   inputRef: PropTypes.func.isRequired,
+  name: PropTypes.string.isRequired,
   onChange: PropTypes.func.isRequired,
 };
 
@@ -83,7 +85,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 +94,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
@@ -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) {
@@ -52,6 +53,7 @@ function NumberFormatCustom(props: NumberFormatCustomProps) {
       onValueChange={(values) => {
         onChange({
           target: {
+            name: props.name,
             value: values.value,
           },
         });
@@ -89,7 +91,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 +100,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,