diff --git a/v3/cypress/e2e/case-card.spec.ts b/v3/cypress/e2e/case-card.spec.ts
index e5bd8c35f..fdf136a9f 100644
--- a/v3/cypress/e2e/case-card.spec.ts
+++ b/v3/cypress/e2e/case-card.spec.ts
@@ -174,7 +174,8 @@ context("case card", () => {
       cy.get('[data-testid="case-card-attr-name"]').should("have.length", 10)
       cy.get('[data-testid="case-card-attr-value"]').should("have.length", 10)
       cy.get('[data-testid="case-card-attr-value"]').eq(9).click()
-      cy.get('[data-testid="case-card-attr-value-text-editor"]').eq(9).should("exist").type("excellent{enter}")
+      cy.get('[data-testid="case-card-attr-value"] [data-testid="cell-text-editor"]')
+        .should("exist").type("excellent{enter}")
       cy.get('[data-testid="case-card-attr-value"]').eq(9).should("contain.text", "excellent")
 
       // Undo/redo check after adding a new attribute
@@ -222,10 +223,10 @@ context("case card", () => {
       cy.log("Edit an attribute value.")
       cy.get('[data-testid="case-card-attr-value"]').eq(0).should("contain.text", "African Elephant")
       cy.get('[data-testid="case-card-attr-value"]').eq(0).click()
-      cy.get('[data-testid="case-card-attr-value-text-editor"]').eq(0).type("Wooly Mammoth{enter}")
+      cy.get('[data-testid="case-card-attr-value"] [data-testid="cell-text-editor"]').eq(0).type("Wooly Mammoth{enter}")
       cy.get('[data-testid="case-card-attr-value"]').eq(0).should("contain.text", "Wooly Mammoth")
       cy.get('[data-testid="case-card-attr-value"]').eq(0).click()
-      cy.get('[data-testid="case-card-attr-value-text-editor"]').eq(0).type("{esc}")
+      cy.get('[data-testid="case-card-attr-value"] [data-testid="cell-text-editor"]').eq(0).type("{esc}")
       cy.get('[data-testid="case-card-attr-value"]').eq(0).should("contain.text", "Wooly Mammoth")
 
       // Undo/redo check after editing an attribute value
@@ -253,7 +254,8 @@ context("case card", () => {
                                                  .eq(0).should("have.text", "5 of 5")
       cy.get('[data-testid="case-card-view"]').eq(1).find('[data-testid="case-card-attr-value"]')
                                                  .eq(0).should("exist").click()
-      cy.get('[data-testid="case-card-view"]').eq(1).find('[data-testid="case-card-attr-value-text-editor"]')
+      cy.get('[data-testid="case-card-view"]').eq(1)
+        .find('[data-testid="case-card-attr-value"] [data-testid="cell-text-editor"]')
                                                  .eq(0).should("exist").type("New Order{enter}")
       cy.log("Check new case has parent and child collections' attributes and values match previously-selected case.")
       cy.get('[data-testid="case-card-view"]').eq(0).find('[data-testid="case-card-view-title"]')
diff --git a/v3/src/components/case-card/case-attr-view.tsx b/v3/src/components/case-card/case-attr-view.tsx
index dd47013ab..dc166b98e 100644
--- a/v3/src/components/case-card/case-attr-view.tsx
+++ b/v3/src/components/case-card/case-attr-view.tsx
@@ -82,6 +82,7 @@ export const CaseAttrView = observer(function CaseAttrView (props: ICaseAttrView
             caseId={caseId}
             acceptValue={handleSubmit}
             updateValue={handleChangeValue}
+            cancelChanges={handleCancel}
             value={isEditing ? editingValue : displayStrValue}
           />
         : <div className="case-card-attr-value-color" onClick={()=>setIsEditing(true)}>{ content }</div>
diff --git a/v3/src/components/case-tile-common/color-text-editor.tsx b/v3/src/components/case-tile-common/color-text-editor.tsx
index ed6f9ecbe..eff81e320 100644
--- a/v3/src/components/case-tile-common/color-text-editor.tsx
+++ b/v3/src/components/case-tile-common/color-text-editor.tsx
@@ -40,10 +40,11 @@ interface IProps {
   value: IValueType
   acceptValue: (newValue: string) => void
   updateValue: (newValue: string) => void
+  cancelChanges: () => void
   renderInput?: (value: string) => JSX.Element
 }
 
-export default function ColorTextEditor({attributeId, caseId, value, acceptValue, updateValue, renderInput}: IProps) {
+export default function ColorTextEditor({attributeId, caseId, value, acceptValue, updateValue, cancelChanges}: IProps) {
   const data = useDataSetContext()
   const attribute = data?.getAttribute(attributeId)
   const [inputValue, setInputValue] = useState(value)
@@ -92,6 +93,7 @@ export default function ColorTextEditor({attributeId, caseId, value, acceptValue
       handleSubmit(inputValue as string)
     } else if (event.key === "Escape") {
       handleCancel()
+      cancelChanges()
     }
   }