diff --git a/x-pack/plugins/security_solution/public/management/pages/trusted_apps/view/components/condition_entry_input/index.tsx b/x-pack/plugins/security_solution/public/management/pages/trusted_apps/view/components/condition_entry_input/index.tsx index d052138d309ac..f487a38401ef0 100644 --- a/x-pack/plugins/security_solution/public/management/pages/trusted_apps/view/components/condition_entry_input/index.tsx +++ b/x-pack/plugins/security_solution/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( 'data-test-subj': dataTestSubj, }) => { const getTestId = useTestIdGenerator(dataTestSubj); + const [isVisited, setIsVisited] = useState(false); const fieldOptions = useMemo>>(() => { const getDropdownDisplay = (field: ConditionEntryField) => ( @@ -155,7 +156,10 @@ export const ConditionEntryInput = memo( if (onVisited) { onVisited(entry); } - }, [entry, onVisited]); + if (!isVisited) { + setIsVisited(true); + } + }, [entry, onVisited, isVisited]); return ( @@ -199,7 +203,7 @@ export const ConditionEntryInput = memo( type: entry.type, })} fullWidth - required + required={isVisited} onChange={handleValueUpdate} onBlur={handleValueOnBlur} data-test-subj={getTestId('value')} diff --git a/x-pack/plugins/security_solution/public/management/pages/trusted_apps/view/components/create_trusted_app_form.test.tsx b/x-pack/plugins/security_solution/public/management/pages/trusted_apps/view/components/create_trusted_app_form.test.tsx index d3b4a541bd18d..f05d018fe8e9a 100644 --- a/x-pack/plugins/security_solution/public/management/pages/trusted_apps/view/components/create_trusted_app_form.test.tsx +++ b/x-pack/plugins/security_solution/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/x-pack/plugins/security_solution/public/management/pages/trusted_apps/view/components/create_trusted_app_form.tsx b/x-pack/plugins/security_solution/public/management/pages/trusted_apps/view/components/create_trusted_app_form.tsx index d4f456ab8e039..da925ddd8a6c1 100644 --- a/x-pack/plugins/security_solution/public/management/pages/trusted_apps/view/components/create_trusted_app_form.tsx +++ b/x-pack/plugins/security_solution/public/management/pages/trusted_apps/view/components/create_trusted_app_form.tsx @@ -478,7 +478,7 @@ export const CreateTrustedAppForm = memo( onChange={handleDomChangeEvents} onBlur={handleDomBlurEvents} fullWidth - required + required={wasVisited?.name} maxLength={256} data-test-subj={getTestId('nameTextField')} />