From 5c0536a87133eea15d3c1fdec88f9dc4836f67f3 Mon Sep 17 00:00:00 2001 From: Kalil Smith-Nuevelle Date: Mon, 3 Mar 2025 11:47:26 -0600 Subject: [PATCH] Improve UX for adding relationship form element Clicking edit on a newly added (not saved to the db) field, then clicking cancel will no longer delete the element. That will only happen if you click cancel immediately after adding the new element. The save button in the form element panel will always be enabled when first configuring a new field input element. Previously the only way to add a new relationship field without making an unnecessary config edit was to click the x, since the Save button was disabled and the cancel button would remove the element from the form. --- .../ElementPanel/InputComponentConfigurationForm.tsx | 2 +- core/app/components/FormBuilder/FormBuilder.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/core/app/components/FormBuilder/ElementPanel/InputComponentConfigurationForm.tsx b/core/app/components/FormBuilder/ElementPanel/InputComponentConfigurationForm.tsx index 66e455ea1..cf8ba4905 100644 --- a/core/app/components/FormBuilder/ElementPanel/InputComponentConfigurationForm.tsx +++ b/core/app/components/FormBuilder/ElementPanel/InputComponentConfigurationForm.tsx @@ -414,7 +414,7 @@ export const InputComponentConfigurationForm = ({ index, fieldInputElement }: Pr data-testid="save-configuration-button" type="submit" className="bg-blue-500 hover:bg-blue-600" - disabled={!form.formState.isDirty} + disabled={!form.formState.isDirty && fieldInputElement.configured} > Save diff --git a/core/app/components/FormBuilder/FormBuilder.tsx b/core/app/components/FormBuilder/FormBuilder.tsx index d89c96e70..b2f7e4132 100644 --- a/core/app/components/FormBuilder/FormBuilder.tsx +++ b/core/app/components/FormBuilder/FormBuilder.tsx @@ -194,7 +194,7 @@ export function FormBuilder({ pubForm, id, stages }: Props) { [elements] ); const removeIfUnconfigured = useCallback(() => { - if (panelState.selectedElementIndex === null) { + if (panelState.selectedElementIndex === null || panelState.backButton !== "selecting") { return; } const element = elements[panelState.selectedElementIndex];