clear inputs

components/discussion-form.js

@@ -65,6 +65,7 @@ export function DiscussionForm ({
         name='title'
         required
         autoFocus
+        clear
       />
       <MarkdownInput
         topLevel

components/form.js

@@ -12,6 +12,7 @@ import styles from './form.module.css'
 import Text from '../components/text'
 import AddIcon from '../svgs/add-fill.svg'
 import { mdHas } from '../lib/md'
+import CloseIcon from '../svgs/close-line.svg'
 
 export function SubmitButton ({
   children, variant, value, onClick, ...props
@@ -129,7 +130,7 @@ function FormGroup ({ className, label, children }) {
 
 function InputInner ({
   prepend, append, hint, showValid, onChange, overrideValue,
-  innerRef, storageKeyPrefix, noForm, ...props
+  innerRef, storageKeyPrefix, noForm, clear, ...props
 }) {
   const [field, meta, helpers] = noForm ? [{}, {}, {}] : useField(props)
   const formik = noForm ? null : useFormikContext()
@@ -152,6 +153,8 @@ function InputInner ({
     }
   }, [overrideValue])
 
+  const invalid = meta.touched && meta.error
+
   return (
     <>
       <InputGroup hasValidation>
@@ -179,11 +182,23 @@ function InputInner ({
               onChange(formik, e)
             }
           }}
-          isInvalid={meta.touched && meta.error}
+          isInvalid={invalid}
           isValid={showValid && meta.initialValue !== meta.value && meta.touched && !meta.error}
         />
-        {append && (
+        {(append || (clear && field.value)) && (
           <InputGroup.Append>
+            {(clear && field.value) &&
+              <Button
+                variant={null}
+                onClick={() => {
+                  helpers.setValue('')
+                  if (storageKey) {
+                    localStorage.removeItem(storageKey)
+                  }
+                }}
+                className={`${styles.clearButton} ${invalid ? styles.isInvalid : ''}`}
+              ><CloseIcon className='fill-grey' height={20} width={20} />
+              </Button>}
             {append}
           </InputGroup.Append>
         )}

components/form.module.css

@@ -10,3 +10,16 @@
     margin-top: -1px;
     height: auto;
 }
+
+.clearButton {
+    background-color: var(--theme-inputBg);
+    border: 1px solid var(--theme-borderColor);
+    padding: 0rem 0.5rem;
+    border-left: 0;
+    display: flex;
+    align-items: center;
+}
+
+.clearButton.isInvalid {
+    border-color: #c03221;
+}

components/job-form.js

@@ -71,7 +71,7 @@ export default function JobForm ({ item, sub }) {
     text: Yup.string().required('required').trim(),
     url: Yup.string()
       .or([Yup.string().email(), Yup.string().url()], 'invalid url or email')
-      .required('Required'),
+      .required('required'),
     maxBid: Yup.number('must be number')
       .integer('must be whole').min(sub.baseCost, `must be at least ${sub.baseCost}`)
       .required('required'),
@@ -153,17 +153,20 @@ export default function JobForm ({ item, sub }) {
           name='title'
           required
           autoFocus
+          clear
         />
         <Input
           label='company'
           name='company'
           required
+          clear
         />
         <BForm.Row className='mr-0'>
           <Col>
             <Input
               label='location'
               name='location'
+              clear
             />
           </Col>
           <Checkbox
@@ -183,6 +186,7 @@ export default function JobForm ({ item, sub }) {
           label={<>how to apply <small className='text-muted ml-2'>url or email address</small></>}
           name='url'
           required
+          clear
         />
         <Input
           label={

components/link-form.js

@@ -78,12 +78,14 @@ export function LinkForm ({ item, editThreshold }) {
         name='title'
         overrideValue={data?.pageTitle}
         required
+        clear
       />
       <Input
         label='url'
         name='url'
         required
         autoFocus
+        clear
         hint={editThreshold
           ? <div className='text-muted font-weight-bold'><Countdown date={editThreshold} /></div>
           : null}