[EuiButtonGroup] Fix initial focus when in a popover

CHANGELOG.md

@@ -2,6 +2,10 @@
 
 - Exported `useDataGridColumnSelector`, `useDataGridColumnSorting`, and `useDataGridStyleSelector` hooks ([#4271](https://github.com/elastic/eui/pull/4271))
 
+**Bug fixes**
+
+- Fixed initial focus of an `EuiButtonGroup` when first item in a popover ([#4288](https://github.com/elastic/eui/pull/4288))
+
 **Theme: Amsterdam**
 
 - Unify colors with the Elastic brand ([#4284](https://github.com/elastic/eui/pull/4284))

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: [

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>
+  );
+};

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 {