Fix <AddressInput /> component (#188)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gnosis.pm/safe-react-components",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "Gnosis UI components",
   "main": "dist/index.min.js",
   "typings": "dist/index.d.ts",

src/inputs/AddressInput/index.tsx

@@ -51,9 +51,12 @@ function AddressInput({
   ...rest
 }: AddressInputProps): ReactElement {
   const [isLoadingENSResolution, setIsLoadingENSResolution] = useState(false);
-  const [inputValue, setInputValue] = useState('');
-  const defaulInputValue = addPrefix(address, networkPrefix, showNetworkPrefix);
-  const inputRef = useRef({ value: defaulInputValue });
+  const defaultInputValue = addPrefix(
+    address,
+    networkPrefix,
+    showNetworkPrefix
+  );
+  const inputRef = useRef({ value: defaultInputValue });
   const throttle = useThrottle();
 
   // we checksum & include the network prefix in the input if showNetworkPrefix is set to true
@@ -134,7 +137,6 @@ function AddressInput({
       );
 
       onChangeAddress(checksumAddress);
-      setInputValue(checksumAddress);
     },
     [networkPrefix, onChangeAddress]
   );
@@ -151,7 +153,7 @@ function AddressInput({
 
   const isLoading = isLoadingENSResolution || showLoadingSpinner;
 
-  const [shrink, setshrink] = useState(!!defaulInputValue);
+  const [shrink, setshrink] = useState(!!defaultInputValue);
 
   useEffect(() => {
     setshrink(!!inputRef.current?.value);
@@ -163,7 +165,6 @@ function AddressInput({
       hiddenLabel={hiddenLabel && !shrink}
       disabled={disabled || isLoadingENSResolution}
       onChange={onChange}
-      value={inputValue}
       InputProps={{
         ...InputProps,
         // if isLoading we show a custom loader adornment

src/inputs/Select/index.tsx

@@ -44,6 +44,7 @@ function Select({
   onItemClick,
   fallbackImage,
   fullWidth,
+  disabled,
   ...rest
 }: SelectProps): React.ReactElement {
   const [open, setOpen] = React.useState(false);
@@ -72,8 +73,12 @@ function Select({
   };
 
   return (
-    <StyledFormControl variant="outlined" fullWidth={fullWidth}>
-      <InputLabel error={!!error}>
+    <StyledFormControl
+      variant="outlined"
+      fullWidth={fullWidth}
+      error={hasError}
+      disabled={disabled}>
+      <InputLabel error={hasError} disabled={disabled}>
         {showErrorsInTheLabel && hasError ? error : label}
       </InputLabel>
       <StyledSelect
@@ -88,6 +93,7 @@ function Select({
         onChange={handleChange}
         label={id ? id : 'generic-select'}
         variant="outlined"
+        disabled={disabled}
         {...rest}>
         {items.map((i) => {
           return (

src/inputs/TextFieldInput/TextFieldInput.stories.tsx

@@ -193,3 +193,18 @@ export const FullWidthTextField = (): React.ReactElement => {
     </div>
   );
 };
+
+export const HelperText = (): React.ReactElement => {
+  const [value, setValue] = useState<string>('');
+  return (
+    <TextFieldInput
+      id="standard-TextFieldInput"
+      label="TextFieldInput"
+      name="TextFieldInput"
+      placeholder="TextFieldInput with default values"
+      value={value}
+      helperText="This is a helper text"
+      onChange={(e) => setValue(e.target.value)}
+    />
+  );
+};

src/inputs/TextFieldInput/index.tsx

@@ -1,12 +1,7 @@
 import React, { ReactElement } from 'react';
 import TextFieldMui, { TextFieldProps } from '@material-ui/core/TextField';
 import styled from 'styled-components';
-import {
-  errorStyles,
-  inputLabelStyles,
-  inputStyles,
-  StyledTextFieldProps,
-} from '../styles';
+import { errorStyles, inputLabelStyles, inputStyles } from '../styles';
 
 export type TextFieldInputProps = {
   id?: string;
@@ -37,12 +32,11 @@ function TextFieldInput({
       name={name}
       label={showErrorsInTheLabel && hasError ? error : label}
       value={value}
-      helperText={hasError ? error : helperText}
+      helperText={!showErrorsInTheLabel && hasError ? error : helperText}
       error={hasError}
       color="primary"
       variant="outlined"
       hiddenLabel={hiddenLabel}
-      showErrorsInTheLabel={showErrorsInTheLabel}
       InputLabelProps={{
         ...rest.InputLabelProps,
         shrink: hiddenLabel || undefined,
@@ -52,7 +46,7 @@ function TextFieldInput({
   );
 }
 
-const TextField = styled((props: StyledTextFieldProps) => (
+const TextField = styled((props: TextFieldProps) => (
   <TextFieldMui {...props} />
 ))<TextFieldProps>`
   && {

src/inputs/styles.ts

@@ -1,11 +1,7 @@
 import { TextFieldProps } from '@material-ui/core';
 import { css } from 'styled-components';
 
-export type StyledTextFieldProps = {
-  showErrorsInTheLabel?: boolean | undefined;
-} & TextFieldProps;
-
-export const inputLabelStyles = css<StyledTextFieldProps>`
+export const inputLabelStyles = css<TextFieldProps>`
   &:hover {
     .MuiInputLabel-root {
       &.MuiInputLabel-shrink:not(.Mui-focused):not(.Mui-disabled) {
@@ -47,7 +43,7 @@ export const inputLabelStyles = css<StyledTextFieldProps>`
   }
 `;
 
-export const inputStyles = css<StyledTextFieldProps>`
+export const inputStyles = css<TextFieldProps>`
   .MuiOutlinedInput-root {
     font-family: ${({ theme }) => theme.fonts.fontFamily};
     color: ${({ theme }) => theme.colors.inputText};
@@ -72,11 +68,13 @@ export const inputStyles = css<StyledTextFieldProps>`
         display: ${({ hiddenLabel }) => (hiddenLabel ? 'none' : 'block')};
       }
     }
+
     &:hover {
       .MuiOutlinedInput-notchedOutline {
         border-color: ${({ theme }) => theme.colors.primary};
       }
     }
+
     &.Mui-focused {
       .MuiOutlinedInput-notchedOutline {
         border-color: ${({ theme }) => theme.colors.inputFilled};
@@ -93,9 +91,15 @@ export const inputStyles = css<StyledTextFieldProps>`
       }
     }
   }
+  .MuiFormLabel-filled
+    + .MuiOutlinedInput-root:not(:hover):not(.Mui-disabled)
+    .MuiOutlinedInput-notchedOutline {
+    border-color: ${({ theme, error }) =>
+      error ? theme.colors.error : theme.colors.inputFilled};
+  }
 `;
 
-export const errorStyles = css<StyledTextFieldProps>`
+export const errorStyles = css<TextFieldProps>`
   .Mui-error {
     &:hover,
     .Mui-focused {
@@ -106,11 +110,5 @@ export const errorStyles = css<StyledTextFieldProps>`
     .MuiOutlinedInput-notchedOutline {
       border-color: ${({ theme }) => theme.colors.error};
     }
-
-    .MuiFormHelperText-root.Mui-error {
-      font-family: ${({ theme }) => theme.fonts.fontFamily};
-      ${({ error, showErrorsInTheLabel }) =>
-        error && showErrorsInTheLabel ? `display: none` : ''}
-    }
   }
 `;

tests/inputs/AddressInput/__snapshots__/AddressInput.stories.storyshot

@@ -7,7 +7,7 @@ exports[`Storyshots Inputs/AddressInput Address Input Disabled 1`] = `
   onSubmit={[Function]}
 >
   <div
-    className="MuiFormControl-root MuiTextField-root sc-gWXbKe deKauR"
+    className="MuiFormControl-root MuiTextField-root sc-gWXbKe kexQVt"
     spellCheck={false}
   >
     <label
@@ -36,7 +36,6 @@ exports[`Storyshots Inputs/AddressInput Address Input Disabled 1`] = `
         placeholder="Ethereum address"
         required={false}
         type="text"
-        value=""
       />
       <fieldset
         aria-hidden={true}
@@ -62,7 +61,7 @@ exports[`Storyshots Inputs/AddressInput Address Input Loading 1`] = `
   onSubmit={[Function]}
 >
   <div
-    className="MuiFormControl-root MuiTextField-root sc-gWXbKe BaIDq"
+    className="MuiFormControl-root MuiTextField-root sc-gWXbKe eRauOW"
     spellCheck={false}
   >
     <label
@@ -91,7 +90,6 @@ exports[`Storyshots Inputs/AddressInput Address Input Loading 1`] = `
         placeholder="Ethereum address"
         required={false}
         type="text"
-        value=""
       />
       <div
         className="MuiInputAdornment-root MuiInputAdornment-positionEnd"
@@ -146,7 +144,7 @@ exports[`Storyshots Inputs/AddressInput Address Input With Adornment 1`] = `
   onSubmit={[Function]}
 >
   <div
-    className="MuiFormControl-root MuiTextField-root sc-gWXbKe BaIDq"
+    className="MuiFormControl-root MuiTextField-root sc-gWXbKe eRauOW"
     spellCheck={false}
   >
     <label
@@ -175,7 +173,6 @@ exports[`Storyshots Inputs/AddressInput Address Input With Adornment 1`] = `
         placeholder="Ethereum address"
         required={false}
         type="text"
-        value=""
       />
       <div
         className="MuiInputAdornment-root MuiInputAdornment-positionEnd"
@@ -267,7 +264,7 @@ exports[`Storyshots Inputs/AddressInput Address Input With ENS Resolution 1`] =
     }
   >
     <div
-      className="MuiFormControl-root MuiTextField-root sc-gWXbKe BaIDq"
+      className="MuiFormControl-root MuiTextField-root sc-gWXbKe eRauOW"
       spellCheck={false}
     >
       <label
@@ -297,7 +294,6 @@ exports[`Storyshots Inputs/AddressInput Address Input With ENS Resolution 1`] =
           placeholder="Type safe.test to check ENS resolution"
           required={false}
           type="text"
-          value=""
         />
         <fieldset
           aria-hidden={true}
@@ -330,7 +326,7 @@ exports[`Storyshots Inputs/AddressInput Address Input With ENS Resolution 1`] =
     }
   >
     <div
-      className="MuiFormControl-root MuiTextField-root sc-gWXbKe ciMulG"
+      className="MuiFormControl-root MuiTextField-root sc-gWXbKe flGugG"
     >
       <label
         className="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-outlined MuiFormLabel-filled"
@@ -402,7 +398,7 @@ exports[`Storyshots Inputs/AddressInput Address Input With Errors 1`] = `
   onSubmit={[Function]}
 >
   <div
-    className="MuiFormControl-root MuiTextField-root sc-gWXbKe BaIDq"
+    className="MuiFormControl-root MuiTextField-root sc-gWXbKe fynudp"
     spellCheck={false}
   >
     <label
@@ -432,7 +428,6 @@ exports[`Storyshots Inputs/AddressInput Address Input With Errors 1`] = `
         placeholder="Ethereum address"
         required={false}
         type="text"
-        value=""
       />
       <fieldset
         aria-hidden={true}
@@ -464,7 +459,7 @@ exports[`Storyshots Inputs/AddressInput Address Input With Simple Address Valida
   onSubmit={[Function]}
 >
   <div
-    className="MuiFormControl-root MuiTextField-root sc-gWXbKe BaIDq"
+    className="MuiFormControl-root MuiTextField-root sc-gWXbKe eRauOW"
     spellCheck={false}
   >
     <label
@@ -493,7 +488,6 @@ exports[`Storyshots Inputs/AddressInput Address Input With Simple Address Valida
         placeholder="Ethereum address"
         required={false}
         type="text"
-        value=""
       />
       <fieldset
         aria-hidden={true}
@@ -529,7 +523,7 @@ exports[`Storyshots Inputs/AddressInput Address Input Without Prefix 1`] = `
   onSubmit={[Function]}
 >
   <div
-    className="MuiFormControl-root MuiTextField-root sc-gWXbKe BaIDq"
+    className="MuiFormControl-root MuiTextField-root sc-gWXbKe eRauOW"
     spellCheck={false}
   >
     <label
@@ -558,7 +552,6 @@ exports[`Storyshots Inputs/AddressInput Address Input Without Prefix 1`] = `
         placeholder="Ethereum address"
         required={false}
         type="text"
-        value=""
       />
       <fieldset
         aria-hidden={true}
@@ -612,8 +605,7 @@ exports[`Storyshots Inputs/AddressInput Safe Address Input Validation 1`] = `
     className="MuiTypography-root sc-fbyfCU iNHYoN MuiTypography-body1"
   />
   <div
-    className="MuiFormControl-root MuiTextField-root sc-gWXbKe BaIDq"
-    showErrorsInTheLabel={false}
+    className="MuiFormControl-root MuiTextField-root sc-gWXbKe eRauOW"
     spellCheck={false}
   >
     <label
@@ -643,7 +635,6 @@ exports[`Storyshots Inputs/AddressInput Safe Address Input Validation 1`] = `
         placeholder="Type the valid safe address"
         required={false}
         type="text"
-        value=""
       />
       <fieldset
         aria-hidden={true}
@@ -686,7 +677,7 @@ exports[`Storyshots Inputs/AddressInput Simple Address Input 1`] = `
     Network Settings:
   </p>
   <div
-    className="MuiFormControl-root sc-kLwhqv UVNmp"
+    className="MuiFormControl-root sc-kLwhqv hCASnh"
   >
     <label
       className="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-outlined MuiFormLabel-filled"
@@ -766,7 +757,7 @@ exports[`Storyshots Inputs/AddressInput Simple Address Input 1`] = `
     }
   >
     <div
-      className="MuiFormControl-root MuiTextField-root sc-gWXbKe BaIDq"
+      className="MuiFormControl-root MuiTextField-root sc-gWXbKe eRauOW"
       spellCheck={false}
     >
       <label
@@ -795,7 +786,6 @@ exports[`Storyshots Inputs/AddressInput Simple Address Input 1`] = `
           placeholder="Ethereum address"
           required={false}
           type="text"
-          value=""
         />
         <fieldset
           aria-hidden={true}