From 198bcf4e3ec998bcf204858f7c7f068c710d1a78 Mon Sep 17 00:00:00 2001
From: Nar Saynorath <nar@narsaynorath.com>
Date: Fri, 29 Oct 2021 10:26:44 -0400
Subject: [PATCH 1/2] fix(discover): Set field to prev value if required but
 empty (#269)

Since we don't pass required as a prop to the input element, an empty
string was considered valid for required fields and incorrectly set.
---
 static/app/views/eventsV2/table/queryField.tsx | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/static/app/views/eventsV2/table/queryField.tsx b/static/app/views/eventsV2/table/queryField.tsx
index 4d19bb48e97512..cb9a4af3149431 100644
--- a/static/app/views/eventsV2/table/queryField.tsx
+++ b/static/app/views/eventsV2/table/queryField.tsx
@@ -676,7 +676,11 @@ class BufferedInput extends React.Component<InputProps, InputState> {
   }
 
   handleBlur = () => {
-    if (this.isValid) {
+    if (this.props.required && this.state.value === '') {
+      // Handle empty strings separately because we don't pass required
+      // to input elements, causing isValid to return true
+      this.setState({value: this.props.value});
+    } else if (this.isValid) {
       this.props.onUpdate(this.state.value);
     } else {
       this.setState({value: this.props.value});

From fc91532b83f8962bed8867a6145d556ef99a5d0f Mon Sep 17 00:00:00 2001
From: Nar Saynorath <nar@narsaynorath.com>
Date: Mon, 1 Nov 2021 10:42:18 -0400
Subject: [PATCH 2/2] fix(discover): Add test for clearing required field
 (#269)

---
 .../eventsV2/table/columnEditModal.spec.js    | 39 +++++++++++++++++++
 1 file changed, 39 insertions(+)

diff --git a/tests/js/spec/views/eventsV2/table/columnEditModal.spec.js b/tests/js/spec/views/eventsV2/table/columnEditModal.spec.js
index 46e484a04f338a..1439fc93300402 100644
--- a/tests/js/spec/views/eventsV2/table/columnEditModal.spec.js
+++ b/tests/js/spec/views/eventsV2/table/columnEditModal.spec.js
@@ -357,6 +357,45 @@ describe('EventsV2 -> ColumnEditModal', function () {
         'Maximum operators exceeded'
       );
     });
+
+    it('resets required field to previous value if cleared', function () {
+      const initialColumnVal = '0.6';
+      const newWrapper = mountModal(
+        {
+          columns: [
+            {
+              kind: 'function',
+              function: [
+                'percentile',
+                'transaction.duration',
+                initialColumnVal,
+                undefined,
+              ],
+            },
+          ],
+          onApply,
+          tagKeys,
+        },
+        initialData
+      );
+
+      const field = newWrapper.find('QueryField input[name="refinement"]');
+      changeInputValue(field, '');
+      newWrapper.update();
+      field.simulate('blur');
+
+      expect(newWrapper.find('QueryField input[name="refinement"]').prop('value')).toBe(
+        initialColumnVal
+      );
+
+      newWrapper.find('Button[priority="primary"]').simulate('click');
+      expect(onApply).toHaveBeenCalledWith([
+        {
+          kind: 'function',
+          function: ['percentile', 'transaction.duration', initialColumnVal, undefined],
+        },
+      ]);
+    });
   });
 
   describe('equation automatic update', function () {