diff --git a/awx/ui_next/src/components/Lookup/InventoryLookup.jsx b/awx/ui_next/src/components/Lookup/InventoryLookup.jsx index 1fda150cb5..d570e79128 100644 --- a/awx/ui_next/src/components/Lookup/InventoryLookup.jsx +++ b/awx/ui_next/src/components/Lookup/InventoryLookup.jsx @@ -16,6 +16,7 @@ class InventoryLookup extends React.Component { value, tooltip, onChange, + onBlur, required, isValid, helperTextInvalid, @@ -37,6 +38,7 @@ class InventoryLookup extends React.Component { name="inventory" value={value} onLookupSave={onChange} + onBlur={onBlur} getItems={getInventories} required={required} qsNamespace="inventory" diff --git a/awx/ui_next/src/screens/Template/shared/JobTemplateForm.jsx b/awx/ui_next/src/screens/Template/shared/JobTemplateForm.jsx index c0f9460461..5108da297c 100644 --- a/awx/ui_next/src/screens/Template/shared/JobTemplateForm.jsx +++ b/awx/ui_next/src/screens/Template/shared/JobTemplateForm.jsx @@ -233,16 +233,19 @@ class JobTemplateForm extends Component { render={({ form }) => ( form.setFieldTouched('inventory')} tooltip={i18n._(t`Select the inventory containing the hosts you want this job to manage.`)} + isValid={!form.touched.inventory || !form.errors.inventory} + helperTextInvalid={form.errors.inventory} onChange={value => { form.setFieldValue('inventory', value.id); form.setFieldValue('organizationId', value.organization); this.setState({ inventory: value }); }} - isValid={!form.errors.inventory} - helperTextInvalid={form.errors.inventory} required + touched={form.touched.inventory} + error={form.errors.inventory} /> )} /> @@ -251,12 +254,12 @@ class JobTemplateForm extends Component { validate={this.handleProjectValidation()} render={({ form }) => ( form.setFieldTouched('project')} tooltip={i18n._(t`Select the project containing the playbook you want this job to execute.`)} + isValid={!form.touched.project || !form.errors.project} + helperTextInvalid={form.errors.project} onChange={value => { form.setFieldValue('project', value.id); this.setState({ project: value }); @@ -289,6 +292,7 @@ class JobTemplateForm extends Component { isValid={isValid} form={form} field={field} + onBlur={() => form.setFieldTouched('playbook')} onError={err => this.setState({ contentError: err })} /> diff --git a/awx/ui_next/src/screens/Template/shared/PlaybookSelect.jsx b/awx/ui_next/src/screens/Template/shared/PlaybookSelect.jsx index 3e7d03c37e..3f49be7a37 100644 --- a/awx/ui_next/src/screens/Template/shared/PlaybookSelect.jsx +++ b/awx/ui_next/src/screens/Template/shared/PlaybookSelect.jsx @@ -5,7 +5,15 @@ import { t } from '@lingui/macro'; import AnsibleSelect from '@components/AnsibleSelect'; import { ProjectsAPI } from '@api'; -function PlaybookSelect({ projectId, isValid, form, field, onError, i18n }) { +function PlaybookSelect({ + projectId, + isValid, + form, + field, + onBlur, + onError, + i18n, +}) { const [options, setOptions] = useState([]); useEffect(() => { if (!projectId) { @@ -40,6 +48,7 @@ function PlaybookSelect({ projectId, isValid, form, field, onError, i18n }) { isValid={isValid} form={form} {...field} + onBlur={onBlur} /> ); }