From 35008202e80df34b15dc48012f26889c91b789fb Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Mon, 11 Feb 2019 12:53:19 +0100
Subject: [PATCH] more input fixes

---
 src/components/atoms/Form/Input.tsx | 44 +++++++++++++++++++++++------
 1 file changed, 36 insertions(+), 8 deletions(-)

diff --git a/src/components/atoms/Form/Input.tsx b/src/components/atoms/Form/Input.tsx
index bb2dd28..d05b33c 100644
--- a/src/components/atoms/Form/Input.tsx
+++ b/src/components/atoms/Form/Input.tsx
@@ -48,12 +48,21 @@ export default class Input extends PureComponent<InputProps, InputState> {
     }
 
     public InputComponent = () => {
-        const { type, options, group, name } = this.props
+        const { type, options, group, name, required } = this.props
+
+        const wrapClass = this.inputWrapClasses()
 
         if (type === 'select') {
             return (
-                <div className={this.inputWrapClasses()}>
-                    <select className={styles.select} {...this.props}>
+                <div className={wrapClass}>
+                    <select
+                        id={name}
+                        className={styles.select}
+                        name={name}
+                        required={required}
+                        onFocus={this.toggleFocus}
+                        onBlur={this.toggleFocus}
+                    >
                         <option value="none">---</option>
                         {options &&
                             options.map((option: string, index: number) => (
@@ -71,8 +80,14 @@ export default class Input extends PureComponent<InputProps, InputState> {
             )
         } else if (type === 'textarea') {
             return (
-                <div className={this.inputWrapClasses()}>
-                    <textarea className={styles.input} {...this.props} />
+                <div className={wrapClass}>
+                    <textarea
+                        id={name}
+                        className={styles.input}
+                        onFocus={this.toggleFocus}
+                        onBlur={this.toggleFocus}
+                        {...this.props}
+                    />
                 </div>
             )
         } else if (type === 'radio' || type === 'checkbox') {
@@ -86,6 +101,7 @@ export default class Input extends PureComponent<InputProps, InputState> {
                                     id={slugify(option, {
                                         lower: true
                                     })}
+                                    type={type}
                                     name={name}
                                     value={slugify(option, {
                                         lower: true
@@ -106,14 +122,26 @@ export default class Input extends PureComponent<InputProps, InputState> {
         }
 
         return (
-            <div className={this.inputWrapClasses()}>
+            <div className={wrapClass}>
                 {group ? (
                     <InputGroup>
-                        <input className={styles.input} {...this.props} />
+                        <input
+                            id={name}
+                            className={styles.input}
+                            onFocus={this.toggleFocus}
+                            onBlur={this.toggleFocus}
+                            {...this.props}
+                        />
                         {group}
                     </InputGroup>
                 ) : (
-                    <input className={styles.input} {...this.props} />
+                    <input
+                        id={name}
+                        className={styles.input}
+                        onFocus={this.toggleFocus}
+                        onBlur={this.toggleFocus}
+                        {...this.props}
+                    />
                 )}
 
                 {type === 'search' && <SearchIcon />}