From 77bfde8a991c0b78321f5d94c74bd1ddb443e85f Mon Sep 17 00:00:00 2001
From: Nathan L Smith <smith@nlsmith.com>
Date: Tue, 2 Feb 2021 15:02:10 -0600
Subject: [PATCH] Updates to select

---
 .../shared/transaction_type_select.tsx        | 37 ++++++++++++-------
 1 file changed, 24 insertions(+), 13 deletions(-)

diff --git a/x-pack/plugins/apm/public/components/shared/transaction_type_select.tsx b/x-pack/plugins/apm/public/components/shared/transaction_type_select.tsx
index bc17135751929..c15984ff8b3c0 100644
--- a/x-pack/plugins/apm/public/components/shared/transaction_type_select.tsx
+++ b/x-pack/plugins/apm/public/components/shared/transaction_type_select.tsx
@@ -6,12 +6,20 @@
 
 import { EuiSelect } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
-import React, { FormEvent } from 'react';
+import React, { FormEvent, useCallback } from 'react';
 import { useHistory } from 'react-router-dom';
+import styled from 'styled-components';
 import { useApmServiceContext } from '../../context/apm_service/use_apm_service_context';
 import { useUrlParams } from '../../context/url_params_context/use_url_params';
 import { fromQuery, toQuery } from './Links/url_helpers';
 
+// The default transaction type (for non-RUM services) is "request". Set the
+// min-width on here to the width when "request" is loaded so it doesn't start
+// out collapsed and change its width when the list of transaction types is loaded.
+const EuiSelectWithWidth = styled(EuiSelect)`
+  min-width: 157px;
+`;
+
 export function TransactionTypeSelect() {
   const { transactionTypes } = useApmServiceContext();
   const history = useHistory();
@@ -19,23 +27,26 @@ export function TransactionTypeSelect() {
     urlParams: { transactionType },
   } = useUrlParams();
 
-  function handleChange(event: FormEvent<HTMLSelectElement>) {
-    const selectedTransactionType = event.currentTarget.value;
-    const newLocation = {
-      ...history.location,
-      search: fromQuery({
-        ...toQuery(history.location.search),
-        transactionType: selectedTransactionType,
-      }),
-    };
-    history.push(newLocation);
-  }
+  const handleChange = useCallback(
+    (event: FormEvent<HTMLSelectElement>) => {
+      const selectedTransactionType = event.currentTarget.value;
+      const newLocation = {
+        ...history.location,
+        search: fromQuery({
+          ...toQuery(history.location.search),
+          transactionType: selectedTransactionType,
+        }),
+      };
+      history.push(newLocation);
+    },
+    [history]
+  );
 
   const options = transactionTypes.map((t) => ({ text: t, value: t }));
 
   return (
     <>
-      <EuiSelect
+      <EuiSelectWithWidth
         onChange={handleChange}
         options={options}
         prepend={i18n.translate('xpack.apm.transactionTypeSelectLabel', {