fix blur behavior/error messages in JT form

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"

awx/ui_next/src/screens/Template/shared/JobTemplateForm.jsx

@@ -233,16 +233,19 @@ class JobTemplateForm extends Component {
             render={({ form }) => (
               <InventoryLookup
                 value={inventory}
+                onBlur={() => 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 }) => (
               <ProjectLookup
-                helperTextInvalid={form.errors.project}
-                isValid={!form.errors.project}
                 value={project}
-                onBlur={handleBlur}
+                onBlur={() => 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 })}
                   />
                 </FormGroup>

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}
     />
   );
 }