show validation error

src/components/forms/SelectField/index.jsx

@@ -18,9 +18,10 @@ const SelectInput = ({
   formControlProps,
   classes,
   renderValue,
+  disableError,
   ...rest
 }: SelectFieldProps) => {
-  const showError = ((meta.submitError && !meta.dirtySinceLastSubmit) || meta.error) && meta.touched
+  const showError = ((meta.submitError && !meta.dirtySinceLastSubmit) || meta.error) && meta.touched && !disableError
   const inputProps = {
     ...restInput,
     name,

src/routes/safe/components/Settings/ThresholdSettings/ChangeThreshold/index.jsx

@@ -66,20 +66,29 @@ const ChangeThreshold = ({
                   Any transaction over any daily limit requires the confirmation of:
                 </Paragraph>
               </Row>
-              <Row margin="xl" align="center">
+              <Row margin="xl" align="center" className={classes.inputRow}>
                 <Col xs={2}>
                   <Field
                     name={THRESHOLD_FIELD_NAME}
-                    component={SelectField}
-                    validate={composeValidators(required, mustBeInteger, minValue(1), differentFrom(threshold))}
-                    data-testid="threshold-select-input"
-                  >
+                    render={props => (
+                      <>
+                        <SelectField {...props} disableError>
                           {[...Array(Number(owners.size))].map((x, index) => (
                             <MenuItem key={index} value={`${index + 1}`}>
                               {index + 1}
                             </MenuItem>
                           ))}
-                  </Field>
+                        </SelectField>
+                        {props.meta.error && props.meta.touched && (
+                          <Paragraph className={classes.errorText} noMargin color="error">
+                            {props.meta.error}
+                          </Paragraph>
+                        )}
+                      </>
+                    )}
+                    validate={composeValidators(required, mustBeInteger, minValue(1), differentFrom(threshold))}
+                    data-testid="threshold-select-input"
+                  />
                 </Col>
                 <Col xs={10}>
                   <Paragraph size="lg" color="primary" noMargin className={classes.ownersText}>
@@ -87,7 +96,7 @@ const ChangeThreshold = ({
                     {' '}
                     {owners.size}
                     {' '}
-owner(s)
+                    owner(s)
                   </Paragraph>
                 </Col>
               </Row>

src/routes/safe/components/Settings/ThresholdSettings/ChangeThreshold/style.js

@@ -34,4 +34,11 @@ export const styles = () => ({
     bottom: 0,
     width: '100%',
   },
+  inputRow: {
+    position: 'relative',
+  },
+  errorText: {
+    position: 'absolute',
+    bottom: '-25px',
+  },
 })

src/routes/safe/components/Settings/ThresholdSettings/index.jsx

@@ -63,6 +63,7 @@ const ThresholdSettings = ({
                   {' '}
                   owners
                 </Paragraph>
+                {owners.size > 1 && (
                   <Row align="center" className={classes.buttonRow}>
                     <Button
                       color="primary"
@@ -74,6 +75,7 @@ const ThresholdSettings = ({
                       Modify
                     </Button>
                   </Row>
+                )}
               </Block>
               <Modal
                 title="Change Required Confirmations"