OCLOMRS-271: Fix bad UX issues while escaping the create new dictiona…

…ry form modal
openmrs · Oct 30, 2018 · 5b87b1d · 5b87b1d
1 parent 1f01677
commit 5b87b1d
Showing 1 changed file with 25 additions and 6 deletions.
diff --git a/src/components/dashboard/components/dictionary/common/DictionaryModal.jsx b/src/components/dashboard/components/dictionary/common/DictionaryModal.jsx
@@ -56,9 +56,7 @@ export class DictionaryModal extends React.Component {
     if (Object.keys(errors).length === 0) {
       this.props
         .submit(this.state.data)
-        .then(() => {
-          this.props.modalhide();
-        })
+        .then(() => this.hideModal())
         .catch((error) => {
           if (error.response) {
             this.setState({
@@ -169,6 +167,26 @@ export class DictionaryModal extends React.Component {
     return errors;
   };
 
+  hideModal = () => {
+    this.setState({
+      data: {
+        id: '',
+        preferred_source: 'CIEL',
+        public_access: 'View',
+        name: '',
+        owner: '',
+        description: '',
+        default_locale: 'en',
+        supported_locales: '',
+        repository_type: 'OpenMRSDictionary',
+        conceptUrl: '',
+      },
+      errors: {},
+      supportedLocalesOptions: [],
+    });
+    this.props.modalhide();
+  }
+
   render() {
     const { data, errors } = this.state;
     const {
@@ -180,10 +198,11 @@ export class DictionaryModal extends React.Component {
       <div>
         <Modal
           isOpen={this.props.show}
-          onClosed={this.props.modalhide}
+          onClosed={this.hideModal}
           className="modal-lg"
+          backdrop="static"
         >
-          <ModalHeader className="modal-heading">
+          <ModalHeader className="modal-heading" toggle={this.hideModal}>
             {this.props.title}
           </ModalHeader>
           {errors && <InlineError text={this.errors} />}
@@ -373,7 +392,7 @@ export class DictionaryModal extends React.Component {
             <Button
               className="btn btn-outline-danger test-btn-cancel"
               id="cancel"
-              onClick={this.props.modalhide}
+              onClick={this.hideModal}
             >
               Cancel
             </Button>