diff --git a/frappe/public/js/workflow_builder/WorkflowBuilder.vue b/frappe/public/js/workflow_builder/WorkflowBuilder.vue
index be4f0e600a..874b752f33 100644
--- a/frappe/public/js/workflow_builder/WorkflowBuilder.vue
+++ b/frappe/public/js/workflow_builder/WorkflowBuilder.vue
@@ -192,7 +192,7 @@ onMounted(() => store.fetch());
 
 <template>
 	<div class="main">
-		<div class="sidebar-container">
+		<div class="sidebar-container" @click.stop>
 			<Sidebar />
 		</div>
 		<div class="workflow-container" @drop="onDrop">
diff --git a/frappe/public/js/workflow_builder/components/Properties.vue b/frappe/public/js/workflow_builder/components/Properties.vue
index 9e042ababb..f5a5f4316a 100644
--- a/frappe/public/js/workflow_builder/components/Properties.vue
+++ b/frappe/public/js/workflow_builder/components/Properties.vue
@@ -25,7 +25,13 @@ let properties = computed(() => {
 		});
 	} else if (store.workflow.selected && "state" in store.workflow.selected.data) {
 		title.value = "State Properties";
-		return store.statefields;
+		return store.statefields.filter(df => {
+			if (df.fieldname == "doc_status") {
+				df.options = ["Draft", "Submitted", "Cancelled"];
+				df.description = "";
+			}
+			return true;
+		});
 	}
 	title.value = "Workflow Details";
 	return store.workflowfields.filter(df => {
diff --git a/frappe/public/js/workflow_builder/utils.js b/frappe/public/js/workflow_builder/utils.js
index fee9fd39d4..067af94995 100644
--- a/frappe/public/js/workflow_builder/utils.js
+++ b/frappe/public/js/workflow_builder/utils.js
@@ -41,10 +41,15 @@ export function get_workflow_elements(workflow) {
 
 	workflow.states.forEach((state, i) => {
 		x += 400;
+		let doc_status_map = {
+			0: "Draft",
+			1: "Submitted",
+			2: "Cancelled",
+		};
 		elements.push(
 			state_obj(i + 1, {
 				state: state.state,
-				doc_status: state.doc_status,
+				doc_status: doc_status_map[state.doc_status],
 				allow_edit: state.allow_edit,
 				update_field: state.update_field,
 				update_value: state.update_value,