diff --git a/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_form/alert_form.test.tsx b/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_form/alert_form.test.tsx
index 4041f6f451a23..493b870a1a6d5 100644
--- a/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_form/alert_form.test.tsx
+++ b/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_form/alert_form.test.tsx
@@ -187,7 +187,7 @@ describe('alert_form', () => {
 
     it('renders alert type description', async () => {
       await setup();
-      wrapper.find('[data-test-subj="my-alert-type-SelectOption"]').first().simulate('click');
+      wrapper.find('button[data-test-subj="my-alert-type-SelectOption"]').first().simulate('click');
       const alertDescription = wrapper.find('[data-test-subj="alertDescription"]');
       expect(alertDescription.exists()).toBeTruthy();
       expect(alertDescription.first().text()).toContain('Alert when testing');
@@ -195,7 +195,7 @@ describe('alert_form', () => {
 
     it('renders alert type documentation link', async () => {
       await setup();
-      wrapper.find('[data-test-subj="my-alert-type-SelectOption"]').first().simulate('click');
+      wrapper.find('button[data-test-subj="my-alert-type-SelectOption"]').first().simulate('click');
       const alertDocumentationLink = wrapper.find('[data-test-subj="alertDocumentationLink"]');
       expect(alertDocumentationLink.exists()).toBeTruthy();
       expect(alertDocumentationLink.first().prop('href')).toBe('https://localhost.local/docs');
diff --git a/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_form/alert_form.tsx b/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_form/alert_form.tsx
index d53b66c6f7414..01c3bdff9c488 100644
--- a/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_form/alert_form.tsx
+++ b/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_form/alert_form.tsx
@@ -152,12 +152,7 @@ export const AlertForm = ({
   >([]);
   const [searchText, setSearchText] = useState<string | undefined>();
   const [inputText, setInputText] = useState<string | undefined>();
-  const [solutions, setSolutions] = useState<
-    Array<{
-      id: string;
-      title: string;
-    }>
-  >([]);
+  const [solutions, setSolutions] = useState<Map<string, string> | undefined>(undefined);
   const [solutionsFilter, setSolutionFilter] = useState<string[]>([]);
 
   // load alert types
@@ -176,28 +171,23 @@ export const AlertForm = ({
         const availableAlertTypesResult = getAvailableAlertTypes(alertTypesResult);
         setAvailableAlertTypes(availableAlertTypesResult);
 
-        const solutionsResult = alertTypesResult.reduce(
-          (result: Array<{ id: string; title: string }>, alertTypeItem) => {
-            if (
-              availableAlertTypesResult.find(
-                (availableItem) => availableItem.alertTypeModel.id === alertTypeItem.id
-              ) &&
-              !result.find((solution) => solution.id === alertTypeItem.producer)
-            ) {
-              result.push({
-                id: alertTypeItem.producer,
-                title:
-                  (kibanaFeatures
-                    ? getProducerFeatureName(alertTypeItem.producer, kibanaFeatures)
-                    : capitalize(alertTypeItem.producer)) ?? capitalize(alertTypeItem.producer),
-              });
+        const solutionsResult = availableAlertTypesResult.reduce(
+          (result: Map<string, string>, alertTypeItem) => {
+            if (!result.has(alertTypeItem.alertType.producer)) {
+              result.set(
+                alertTypeItem.alertType.producer,
+                (kibanaFeatures
+                  ? getProducerFeatureName(alertTypeItem.alertType.producer, kibanaFeatures)
+                  : capitalize(alertTypeItem.alertType.producer)) ??
+                  capitalize(alertTypeItem.alertType.producer)
+              );
             }
             return result;
           },
-          []
+          new Map()
         );
         setSolutions(
-          solutionsResult.sort((a, b) => a.title.toString().localeCompare(b.title.toString()))
+          new Map([...solutionsResult.entries()].sort(([, a], [, b]) => a.localeCompare(b)))
         );
       } catch (e) {
         toastNotifications.addDanger({
@@ -312,7 +302,9 @@ export const AlertForm = ({
   );
 
   const alertTypeNodes = Object.entries(alertTypesByProducer)
-    .sort(([a], [b]) => a.localeCompare(b))
+    .sort(([a], [b]) =>
+      solutions ? solutions.get(a)!.localeCompare(solutions.get(b)!) : a.localeCompare(b)
+    )
     .map(([solution, items], groupIndex) => (
       <Fragment key={`group${groupIndex}`}>
         <EuiTitle
@@ -698,13 +690,15 @@ export const AlertForm = ({
                   )}
                 />
               </EuiFlexItem>
-              <EuiFlexItem grow={false}>
-                <SolutionFilter
-                  key="solution-filter"
-                  solutions={solutions}
-                  onChange={(selectedSolutions: string[]) => setSolutionFilter(selectedSolutions)}
-                />
-              </EuiFlexItem>
+              {solutions ? (
+                <EuiFlexItem grow={false}>
+                  <SolutionFilter
+                    key="solution-filter"
+                    solutions={solutions}
+                    onChange={(selectedSolutions: string[]) => setSolutionFilter(selectedSolutions)}
+                  />
+                </EuiFlexItem>
+              ) : null}
             </EuiFlexGroup>
           </EuiFormRow>
           <EuiSpacer />
diff --git a/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_form/solution_filter.tsx b/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_form/solution_filter.tsx
index cca62a1336306..7caee22cf7633 100644
--- a/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_form/solution_filter.tsx
+++ b/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_form/solution_filter.tsx
@@ -8,13 +8,8 @@ import React, { useEffect, useState } from 'react';
 import { FormattedMessage } from '@kbn/i18n/react';
 import { EuiFilterGroup, EuiPopover, EuiFilterButton, EuiFilterSelectItem } from '@elastic/eui';
 
-interface Solution {
-  id: string;
-  title: string;
-}
-
 interface SolutionFilterProps {
-  solutions: Solution[];
+  solutions: Map<string, string>;
   onChange?: (selectedSolutions: string[]) => void;
 }
 
@@ -48,27 +43,27 @@ export const SolutionFilter: React.FunctionComponent<SolutionFilterProps> = ({
           >
             <FormattedMessage
               id="xpack.triggersActionsUI.sections.alertForm.solutionFilterLabel"
-              defaultMessage="Filter by solution:"
+              defaultMessage="Filter by solution"
             />
           </EuiFilterButton>
         }
       >
         <div className="euiFilterSelect__items">
-          {solutions.map((item) => (
+          {[...solutions.entries()].map(([id, title]) => (
             <EuiFilterSelectItem
-              key={item.id}
+              key={id}
               onClick={() => {
-                const isPreviouslyChecked = selectedValues.includes(item.id);
+                const isPreviouslyChecked = selectedValues.includes(id);
                 if (isPreviouslyChecked) {
-                  setSelectedValues(selectedValues.filter((val) => val !== item.id));
+                  setSelectedValues(selectedValues.filter((val) => val !== id));
                 } else {
-                  setSelectedValues([...selectedValues, item.id]);
+                  setSelectedValues([...selectedValues, id]);
                 }
               }}
-              checked={selectedValues.includes(item.id) ? 'on' : undefined}
-              data-test-subj={`solution${item.id}FilterOption`}
+              checked={selectedValues.includes(id) ? 'on' : undefined}
+              data-test-subj={`solution${id}FilterOption`}
             >
-              {item.title}
+              {title}
             </EuiFilterSelectItem>
           ))}
         </div>