Avoid double-click double-submit issues in modals; closes #2199

This commit is contained in:
Dane Everitt 2020-08-01 19:49:38 -07:00
parent 0c7f118f45
commit c58348735d
No known key found for this signature in database
GPG key ID: EEA66103B3D71F53
3 changed files with 5 additions and 9 deletions

View file

@ -49,7 +49,7 @@ const ModalContent = ({ ...props }: RequiredModalProps) => {
</FormikFieldWrapper> </FormikFieldWrapper>
</div> </div>
<div css={tw`flex justify-end`}> <div css={tw`flex justify-end`}>
<Button type={'submit'}> <Button type={'submit'} disabled={isSubmitting}>
Start backup Start backup
</Button> </Button>
</div> </div>
@ -94,11 +94,7 @@ export default () => {
ignored: string(), ignored: string(),
})} })}
> >
<ModalContent <ModalContent appear visible={visible} onDismissed={() => setVisible(false)}/>
appear
visible={visible}
onDismissed={() => setVisible(false)}
/>
</Formik> </Formik>
} }
<Button onClick={() => setVisible(true)}> <Button onClick={() => setVisible(true)}>

View file

@ -65,7 +65,7 @@ const EditScheduleModal = ({ schedule, ...props }: Omit<Props, 'onScheduleUpdate
/> />
</div> </div>
<div css={tw`mt-6 text-right`}> <div css={tw`mt-6 text-right`}>
<Button type={'submit'}> <Button type={'submit'} disabled={isSubmitting}>
{schedule ? 'Save changes' : 'Create schedule'} {schedule ? 'Save changes' : 'Create schedule'}
</Button> </Button>
</div> </div>

View file

@ -32,7 +32,7 @@ interface Values {
} }
const TaskDetailsForm = ({ isEditingTask }: { isEditingTask: boolean }) => { const TaskDetailsForm = ({ isEditingTask }: { isEditingTask: boolean }) => {
const { values: { action }, setFieldValue, setFieldTouched } = useFormikContext<Values>(); const { values: { action }, setFieldValue, setFieldTouched, isSubmitting } = useFormikContext<Values>();
useEffect(() => { useEffect(() => {
setFieldValue('payload', action === 'power' ? 'start' : ''); setFieldValue('payload', action === 'power' ? 'start' : '');
@ -94,7 +94,7 @@ const TaskDetailsForm = ({ isEditingTask }: { isEditingTask: boolean }) => {
/> />
</div> </div>
<div css={tw`flex justify-end mt-6`}> <div css={tw`flex justify-end mt-6`}>
<Button type={'submit'}> <Button type={'submit'} disabled={isSubmitting}>
{isEditingTask ? 'Save Changes' : 'Create Task'} {isEditingTask ? 'Save Changes' : 'Create Task'}
</Button> </Button>
</div> </div>