allow input character overflow for editting

components/form.js

@@ -225,7 +225,7 @@ function FormGroup ({ className, label, children }) {
 
 function InputInner ({
   prepend, append, hint, showValid, onChange, onBlur, overrideValue,
-  innerRef, noForm, clear, onKeyDown, inputGroupClassName, debounce, ...props
+  innerRef, noForm, clear, onKeyDown, inputGroupClassName, debounce, maxLength, ...props
 }) {
   const [field, meta, helpers] = noForm ? [{}, {}, {}] : useField(props)
   const formik = noForm ? null : useFormikContext()
@@ -263,6 +263,8 @@ function InputInner ({
     return () => clearTimeout(debounceRef.current)
   }, [noForm, formik, field.value])
 
+  const remaining = maxLength && maxLength - (field.value || '').length
+
   return (
     <>
       <InputGroup hasValidation className={inputGroupClassName}>
@@ -321,9 +323,9 @@ function InputInner ({
           {hint}
         </BootstrapForm.Text>
       )}
-      {props.maxLength && (
-        <BootstrapForm.Text>
-          {`${numWithUnits(props.maxLength - (field.value || '').length, { abbreviate: false, unitSingular: 'character', unitPlural: 'characters' })} remaining`}
+      {maxLength && !(meta.touched && meta.error && invalid) && (
+        <BootstrapForm.Text className={remaining < 0 ? 'text-danger' : undefined}>
+          {`${numWithUnits(remaining, { abbreviate: false, unitSingular: 'character', unitPlural: 'characters' })} remaining`}
         </BootstrapForm.Text>
       )}
     </>

lib/validate.js

@@ -38,7 +38,7 @@ addMethod(string, 'or', function (schemas, msg) {
 
 const titleValidator = string().required('required').trim().max(
   MAX_TITLE_LENGTH,
-  ({ max, value }) => `${Math.abs(max - value.length)} too many`
+  ({ max, value }) => `-${Math.abs(max - value.length)} characters remaining`
 )
 
 const intValidator = number().typeError('must be a number').integer('must be whole')
@@ -135,7 +135,7 @@ export function pollSchema (client, numExistingChoices = 0) {
       string().trim().test('my-test', 'required', function (value) {
         return (this.path !== 'options[0]' && this.path !== 'options[1]') || value
       }).max(MAX_POLL_CHOICE_LENGTH,
-        ({ max, value }) => `${Math.abs(max - value.length)} too many characters`
+        ({ max, value }) => `-${Math.abs(max - value.length)} characters remaining`
       )
     ).test({
       message: `at most ${MAX_POLL_NUM_CHOICES} choices`,