Set required to false until the input is not visited (elastic#116099)

mikecote · Oct 26, 2021 · 30c7211 · 30c7211
1 parent 79c43fb
commit 30c7211
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 6 deletions.
diff --git a/...tion/public/management/pages/trusted_apps/view/components/condition_entry_input/index.tsx b/...tion/public/management/pages/trusted_apps/view/components/condition_entry_input/index.tsx
@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import React, { ChangeEventHandler, memo, useCallback, useMemo } from 'react';
+import React, { ChangeEventHandler, memo, useCallback, useMemo, useState } from 'react';
 import styled from 'styled-components';
 import { i18n } from '@kbn/i18n';
 import {
@@ -100,6 +100,7 @@ export const ConditionEntryInput = memo<ConditionEntryInputProps>(
     'data-test-subj': dataTestSubj,
   }) => {
     const getTestId = useTestIdGenerator(dataTestSubj);
+    const [isVisited, setIsVisited] = useState(false);
 
     const fieldOptions = useMemo<Array<EuiSuperSelectOption<string>>>(() => {
       const getDropdownDisplay = (field: ConditionEntryField) => (
@@ -155,7 +156,10 @@ export const ConditionEntryInput = memo<ConditionEntryInputProps>(
       if (onVisited) {
         onVisited(entry);
       }
-    }, [entry, onVisited]);
+      if (!isVisited) {
+        setIsVisited(true);
+      }
+    }, [entry, onVisited, isVisited]);
 
     return (
       <InputGroup data-test-subj={dataTestSubj}>
@@ -199,7 +203,7 @@ export const ConditionEntryInput = memo<ConditionEntryInputProps>(
                 type: entry.type,
               })}
               fullWidth
-              required
+              required={isVisited}
               onChange={handleValueUpdate}
               onBlur={handleValueOnBlur}
               data-test-subj={getTestId('value')}

diff --git a/...ion/public/management/pages/trusted_apps/view/components/create_trusted_app_form.test.tsx b/...ion/public/management/pages/trusted_apps/view/components/create_trusted_app_form.test.tsx
@@ -153,7 +153,11 @@ describe('When using the Trusted App Form', () => {
   describe('and the form is rendered', () => {
     beforeEach(() => render());
 
-    it('should show Name as required', () => {
+    it('should show Name as required after blur', () => {
+      expect(getNameField().required).toBe(false);
+      reactTestingLibrary.act(() => {
+        fireEvent.blur(getNameField());
+      });
       expect(getNameField().required).toBe(true);
     });
 
@@ -224,7 +228,11 @@ describe('When using the Trusted App Form', () => {
       ]);
     });
 
-    it('should show the value field as required', () => {
+    it('should show the value field as required after blur', () => {
+      expect(getConditionValue(getCondition()).required).toEqual(false);
+      reactTestingLibrary.act(() => {
+        fireEvent.blur(getConditionValue(getCondition()));
+      });
       expect(getConditionValue(getCondition()).required).toEqual(true);
     });
 

diff --git a/...solution/public/management/pages/trusted_apps/view/components/create_trusted_app_form.tsx b/...solution/public/management/pages/trusted_apps/view/components/create_trusted_app_form.tsx
@@ -478,7 +478,7 @@ export const CreateTrustedAppForm = memo<CreateTrustedAppFormProps>(
             onChange={handleDomChangeEvents}
             onBlur={handleDomBlurEvents}
             fullWidth
-            required
+            required={wasVisited?.name}
             maxLength={256}
             data-test-subj={getTestId('nameTextField')}
           />