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.

e2e/suite1/specs/select-focus.spec.ts

@@ -0,0 +1,40 @@
+import { e2e } from '@grafana/e2e';
+
+e2e.scenario({
+  describeName: 'Select focus/unfocus tests',
+  itName: 'Tests select focus/unfocus scenarios',
+  addScenarioDataSource: false,
+  addScenarioDashBoard: false,
+  skipScenario: false,
+  scenario: () => {
+    e2e.flows.openDashboard('5SdHCadmz');
+    e2e.pages.Dashboard.Toolbar.toolbarItems('Dashboard settings').click();
+
+    e2e.components.FolderPicker.container()
+      .should('be.visible')
+      .within(() => {
+        e2e.components.Select.input()
+          .should('be.visible')
+          .click();
+
+        e2e.components.Select.option()
+          .should('be.visible')
+          .first()
+          .click();
+
+        e2e.components.Select.input()
+          .should('be.visible')
+          .should('have.focus');
+      });
+
+    e2e.pages.Dashboard.Settings.General.title().click();
+
+    e2e.components.FolderPicker.container()
+      .should('be.visible')
+      .within(() => {
+        e2e.components.Select.input()
+          .should('be.visible')
+          .should('not.have.focus');
+      });
+  },
+});