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}
+                    render={props => (
+                      <>
+                        <SelectField {...props} disableError>
+                          {[...Array(Number(owners.size))].map((x, index) => (
+                            <MenuItem key={index} value={`${index + 1}`}>
+                              {index + 1}
+                            </MenuItem>
+                          ))}
+                        </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"
-                  >
+                  />
-                    {[...Array(Number(owners.size))].map((x, index) => (
-                      <MenuItem key={index} value={`${index + 1}`}>
-                        {index + 1}
-                      </MenuItem>
-                    ))}
-                  </Field>
                 </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,17 +63,19 @@ const ThresholdSettings = ({
                   {' '}
                   owners
                 </Paragraph>
-                <Row align="center" className={classes.buttonRow}>
+                {owners.size > 1 && (
-                  <Button
+                  <Row align="center" className={classes.buttonRow}>
-                    color="primary"
+                    <Button
-                    minWidth={120}
+                      color="primary"
-                    className={classes.modifyBtn}
+                      minWidth={120}
-                    onClick={toggleModal}
+                      className={classes.modifyBtn}
-                    variant="contained"
+                      onClick={toggleModal}
-                  >
+                      variant="contained"
-                    Modify
+                    >
-                  </Button>
+                      Modify
-                </Row>
+                    </Button>
+                  </Row>
+                )}
               </Block>
               <Modal
                 title="Change Required Confirmations"