From 7d4d590ef5b7a66d96029967b608333aafb85e14 Mon Sep 17 00:00:00 2001
From: Leandro Boscariol <alfetopito@users.noreply.github.com>
Date: Mon, 4 Jan 2021 04:34:36 -0800
Subject: [PATCH] Text field input props (#80)

* Passing down `inputProps` from `input` object to MUI component

This change makes it possible to set <input> HTML's props like
min and max values, by passing them onto <TextField> `input` obj

* Added <TextField> story with example of a number field

Co-authored-by: Leandro Boscariol <leandro.boscariol@gnosis.io>
---
 src/inputs/TextField/index.tsx             |  2 +-
 src/inputs/TextField/textField.stories.tsx | 15 +++++++++++++++
 2 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/src/inputs/TextField/index.tsx b/src/inputs/TextField/index.tsx
index d83f8735..e4a9aa2a 100644
--- a/src/inputs/TextField/index.tsx
+++ b/src/inputs/TextField/index.tsx
@@ -78,7 +78,7 @@ function TextField({
       <CustomTextField
         {...rest}
         {...customProps}
-        {...inputRest}
+        inputProps={inputRest}
         className={className}
         size={undefined}
         name={name}
diff --git a/src/inputs/TextField/textField.stories.tsx b/src/inputs/TextField/textField.stories.tsx
index be7afb03..009ed87e 100644
--- a/src/inputs/TextField/textField.stories.tsx
+++ b/src/inputs/TextField/textField.stories.tsx
@@ -27,6 +27,21 @@ export const SimpleTextField = (): React.ReactElement => {
   );
 };
 
+export const SimpleNumberField = (): React.ReactElement => {
+  const [value, setValue] = useState<string>('');
+  return (
+    <form noValidate autoComplete="off" onSubmit={onSubmit}>
+      <TextField
+        id="standard-name"
+        label="Name"
+        value={value}
+        onChange={(e) => setValue(e.target.value)}
+        input={{ type: 'number', min: 5, max: 10, step: 1 }}
+      />
+    </form>
+  );
+};
+
 export const Error = (): React.ReactElement => {
   const [value, setValue] = useState<string>('some incorrect value');
   return (