From 4248003ee02efda5ab56dd2556d6821bbf4b0fea Mon Sep 17 00:00:00 2001
From: Caroline Horn <549577+cchaos@users.noreply.github.com>
Date: Thu, 19 Nov 2020 15:34:16 -0500
Subject: [PATCH] [EuiButtonGroup] Fix initial focus when in a popover (#4288)

By removing the `transition: all` on the `.euiButtonGroup__buttons` selector
- Also added an example to the compressed forms page.
---
 CHANGELOG.md                                  |  4 +-
 .../form_compressed_example.js                | 26 ++++++
 .../form_compressed_popover.js                | 80 +++++++++++++++++++
 .../button/button_group/_button_group.scss    |  1 -
 4 files changed, 109 insertions(+), 2 deletions(-)
 create mode 100644 src-docs/src/views/form_compressed/form_compressed_popover.js

diff --git a/CHANGELOG.md b/CHANGELOG.md
index b338e59291f..f0e7c1eb4fb 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,6 +1,8 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
-No public interface changes since `30.4.1`.
+**Bug fixes**
+
+- Fixed initial focus of an `EuiButtonGroup` when first item in a popover ([#4288](https://github.com/elastic/eui/pull/4288))
 
 ## [`30.4.1`](https://github.com/elastic/eui/tree/v30.4.1)
 
diff --git a/src-docs/src/views/form_compressed/form_compressed_example.js b/src-docs/src/views/form_compressed/form_compressed_example.js
index 56106222a43..4c0b548c75e 100644
--- a/src-docs/src/views/form_compressed/form_compressed_example.js
+++ b/src-docs/src/views/form_compressed/form_compressed_example.js
@@ -26,6 +26,10 @@ import FormHelp from './form_horizontal_help';
 const formHelpSource = require('!!raw-loader!./form_horizontal_help');
 const formHelpHtml = renderToHtml(FormHelp);
 
+import FormPopover from './form_compressed_popover';
+const formPopoverSource = require('!!raw-loader!./form_compressed_popover');
+const formPopoverHtml = renderToHtml(FormPopover);
+
 import ComplexExample from './complex_example';
 const ComplexExampleSource = require('!!raw-loader!./complex_example');
 const ComplexExampleHtml = renderToHtml(ComplexExample);
@@ -185,6 +189,28 @@ export const FormCompressedExample = {
 </EuiFormRow>`,
       ],
     },
+    {
+      title: 'In a popover',
+      source: [
+        {
+          type: GuideSectionTypes.JS,
+          code: formPopoverSource,
+        },
+        {
+          type: GuideSectionTypes.HTML,
+          code: formPopoverHtml,
+        },
+      ],
+      text: (
+        <Fragment>
+          <p>
+            Always use the compressed version of forms and elements when they
+            exist inside of a<Link to="/layout/popover">popover</Link>.
+          </p>
+        </Fragment>
+      ),
+      demo: <FormPopover />,
+    },
     {
       title: 'Complex example',
       source: [
diff --git a/src-docs/src/views/form_compressed/form_compressed_popover.js b/src-docs/src/views/form_compressed/form_compressed_popover.js
new file mode 100644
index 00000000000..e30050eec7f
--- /dev/null
+++ b/src-docs/src/views/form_compressed/form_compressed_popover.js
@@ -0,0 +1,80 @@
+import React, { useState } from 'react';
+
+import {
+  EuiFieldText,
+  EuiFormRow,
+  EuiSelect,
+  EuiButton,
+  EuiPopover,
+  EuiButtonGroup,
+} from '../../../../src/components';
+
+export default () => {
+  const [isPopoverOpen, setIsPopoverOpen] = useState(false);
+  const [granularityIdSelected, setGranularityIdSelected] = useState(
+    'granularityButton1'
+  );
+
+  const onButtonClick = () =>
+    setIsPopoverOpen((isPopoverOpen) => !isPopoverOpen);
+  const closePopover = () => setIsPopoverOpen(false);
+
+  const onGranularityChange = (optionId) => {
+    setGranularityIdSelected(optionId);
+  };
+
+  const button = (
+    <EuiButton iconType="arrowDown" iconSide="right" onClick={onButtonClick}>
+      Open form in popover
+    </EuiButton>
+  );
+
+  const granularityToggleButtons = [
+    {
+      id: 'granularityButton1',
+      label: 'Left',
+    },
+    {
+      id: 'granularityButton2',
+      label: 'Middle',
+    },
+    {
+      id: 'granularityButton3',
+      label: 'Right',
+    },
+  ];
+
+  return (
+    <EuiPopover
+      button={button}
+      isOpen={isPopoverOpen}
+      closePopover={closePopover}>
+      <div style={{ width: 300 }}>
+        <EuiFormRow label="Button group" display="columnCompressed">
+          <EuiButtonGroup
+            legend="Granulariy of zoom levels"
+            options={granularityToggleButtons}
+            idSelected={granularityIdSelected}
+            onChange={onGranularityChange}
+            buttonSize="compressed"
+            isFullWidth
+          />
+        </EuiFormRow>
+        <EuiFormRow label="Text field" display="columnCompressed">
+          <EuiFieldText name="first" compressed />
+        </EuiFormRow>
+
+        <EuiFormRow label={'Select'} display="columnCompressed">
+          <EuiSelect
+            options={[
+              { value: 'option_one', text: 'Option one' },
+              { value: 'option_two', text: 'Option two' },
+              { value: 'option_three', text: 'Option three' },
+            ]}
+            compressed
+          />
+        </EuiFormRow>
+      </div>
+    </EuiPopover>
+  );
+};
diff --git a/src/components/button/button_group/_button_group.scss b/src/components/button/button_group/_button_group.scss
index 5b64aff96fc..6df214eb227 100644
--- a/src/components/button/button_group/_button_group.scss
+++ b/src/components/button/button_group/_button_group.scss
@@ -22,7 +22,6 @@
   max-width: 100%;
   display: flex;
   overflow: hidden;
-  transition: all $euiAnimSpeedNormal ease-in-out;
 }
 
 .euiButtonGroup--isDisabled .euiButtonGroup__buttons {