From e18ecc3be23c8664fd101e6299f7e35380e9d0d6 Mon Sep 17 00:00:00 2001
From: Scott Bishel <scott.bishel@mattermost.com>
Date: Wed, 6 Oct 2021 07:57:16 -0600
Subject: [PATCH] make sure setValue receives empty string (#1444)

* make sure setValue receives empty string

* fix lint errors
---
 .../propertyValueElement.test.tsx.snap        | 39 ++++++++++++
 .../components/propertyValueElement.test.tsx  | 60 ++++++++++++++++++-
 .../src/components/propertyValueElement.tsx   |  4 +-
 3 files changed, 98 insertions(+), 5 deletions(-)

diff --git a/webapp/src/components/__snapshots__/propertyValueElement.test.tsx.snap b/webapp/src/components/__snapshots__/propertyValueElement.test.tsx.snap
index cc6f3c6d2..508bb2032 100644
--- a/webapp/src/components/__snapshots__/propertyValueElement.test.tsx.snap
+++ b/webapp/src/components/__snapshots__/propertyValueElement.test.tsx.snap
@@ -1,5 +1,44 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`components/propertyValueElement Generic fields should allow cancel 1`] = `
+<div>
+  <input
+    class="Editable octo-propertyvalue"
+    placeholder="Empty"
+    spellcheck="true"
+    style="width: 5px;"
+    title=""
+    value=""
+  />
+</div>
+`;
+
+exports[`components/propertyValueElement URL fields should allow cancel 1`] = `
+<div>
+  <div
+    class="URLProperty property-link url"
+  >
+    <input
+      class="Editable octo-propertyvalue"
+      placeholder="Empty"
+      style="width: 5px;"
+      title="http://localhost"
+      value="http://localhost"
+    />
+    <a
+      class="Link__button"
+      href="http://localhost"
+      rel="noreferrer"
+      target="_blank"
+    >
+      <i
+        class="CompassIcon icon-link-variant LinkIcon"
+      />
+    </a>
+  </div>
+</div>
+`;
+
 exports[`components/propertyValueElement should match snapshot, date, array value 1`] = `
 <div>
   <div
diff --git a/webapp/src/components/propertyValueElement.test.tsx b/webapp/src/components/propertyValueElement.test.tsx
index d9c5f78a6..10243a973 100644
--- a/webapp/src/components/propertyValueElement.test.tsx
+++ b/webapp/src/components/propertyValueElement.test.tsx
@@ -4,13 +4,11 @@
 import React from 'react'
 import {render} from '@testing-library/react'
 import '@testing-library/jest-dom'
+import userEvent from '@testing-library/user-event'
 
 import {wrapDNDIntl} from '../testUtils'
-
 import 'isomorphic-fetch'
-
 import {IPropertyTemplate, IPropertyOption} from '../blocks/board'
-
 import {TestBlockFactory} from '../test/testBlockFactory'
 
 import PropertyValueElement from './propertyValueElement'
@@ -188,4 +186,60 @@ describe('components/propertyValueElement', () => {
         const {container} = render(component)
         expect(container).toMatchSnapshot()
     })
+
+    test('URL fields should allow cancel', () => {
+        const propertyTemplate: IPropertyTemplate = {
+            id: 'property_url',
+            name: 'Property URL',
+            type: 'url',
+            options: [],
+        }
+
+        const component = wrapDNDIntl(
+            <PropertyValueElement
+                board={board}
+                readOnly={false}
+                card={card}
+                contents={[]}
+                comments={[comments]}
+                propertyTemplate={propertyTemplate}
+                showEmptyPlaceholder={true}
+            />,
+        )
+
+        const {container} = render(component)
+        const editElement = container.querySelector('.Editable')
+        expect(editElement).toBeDefined()
+
+        userEvent.type(editElement!, 'http://test{esc}')
+        expect(container).toMatchSnapshot()
+    })
+
+    test('Generic fields should allow cancel', () => {
+        const propertyTemplate: IPropertyTemplate = {
+            id: 'text',
+            name: 'Generic Text',
+            type: 'text',
+            options: [],
+        }
+
+        const component = wrapDNDIntl(
+            <PropertyValueElement
+                board={board}
+                readOnly={false}
+                card={card}
+                contents={[]}
+                comments={[comments]}
+                propertyTemplate={propertyTemplate}
+                showEmptyPlaceholder={true}
+            />,
+        )
+
+        const {container} = render(component)
+        const editElement = container.querySelector('.Editable')
+        expect(editElement).toBeDefined()
+
+        userEvent.type(editElement!, 'http://test{esc}')
+        expect(container).toMatchSnapshot()
+    })
 })
diff --git a/webapp/src/components/propertyValueElement.tsx b/webapp/src/components/propertyValueElement.tsx
index 6b96b1d0c..b5c2ef4fc 100644
--- a/webapp/src/components/propertyValueElement.tsx
+++ b/webapp/src/components/propertyValueElement.tsx
@@ -182,7 +182,7 @@ const PropertyValueElement = (props:Props): JSX.Element => {
                 placeholder={emptyDisplayValue}
                 onChange={setValue}
                 onSave={saveTextProperty}
-                onCancel={() => setValue(propertyValue)}
+                onCancel={() => setValue(propertyValue || '')}
                 validator={(newValue) => validateProp(propertyTemplate.type, newValue)}
             />
         )
@@ -236,7 +236,7 @@ const PropertyValueElement = (props:Props): JSX.Element => {
                     autoExpand={true}
                     onChange={setValue}
                     onSave={saveTextProperty}
-                    onCancel={() => setValue(propertyValue)}
+                    onCancel={() => setValue(propertyValue || '')}
                     validator={(newValue) => validateProp(propertyTemplate.type, newValue)}
                     spellCheck={propertyTemplate.type === 'text'}
                 />