Select: fixes so component loses focus on selecting value or pressing outside of input. (#24008)

* changed the value container to a class component to get it to work with focus (maybe something with context?).

* added e2e tests to verify that the select focus is working as it should.

* fixed according to feedback.

* updated snapshot.

public/app/core/components/Select/FolderPicker.tsx

@@ -1,9 +1,10 @@
 import React, { PureComponent } from 'react';
+import { debounce } from 'lodash';
 import { AsyncSelect } from '@grafana/ui';
 import { AppEvents, SelectableValue } from '@grafana/data';
-import { debounce } from 'lodash';
-import appEvents from '../../app_events';
 import { getBackendSrv } from '@grafana/runtime';
+import { selectors } from '@grafana/e2e-selectors';
+import appEvents from '../../app_events';
 import { contextSrv } from 'app/core/services/context_srv';
 import { DashboardSearchHit } from 'app/features/search/types';
 
@@ -148,7 +149,7 @@ export class FolderPicker extends PureComponent<Props, State> {
     const { enableCreateNew, useNewForms } = this.props;
 
     return (
-      <>
+      <div aria-label={selectors.components.FolderPicker.container}>
         {useNewForms && (
           <AsyncSelect
             loadingMessage="Loading folders..."
@@ -180,7 +181,7 @@ export class FolderPicker extends PureComponent<Props, State> {
             </div>
           </div>
         )}
-      </>
+      </div>
     );
   }
 }

public/app/core/components/Select/__snapshots__/FolderPicker.test.tsx.snap

@@ -1,7 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`FolderPicker should render 1`] = `
-<Fragment>
+<div
+  aria-label="Folder picker select container"
+>
   <div
     className="gf-form-inline"
   >
@@ -26,5 +28,5 @@ exports[`FolderPicker should render 1`] = `
       />
     </div>
   </div>
-</Fragment>
+</div>
 `;