🎺 Add inputPopoverProps support 🎺

elastic · Oct 2, 2023 · d50c5f8 · d50c5f8
1 parent 2e36462
commit d50c5f8
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 5 deletions.
diff --git a/src/components/combo_box/combo_box.spec.tsx b/src/components/combo_box/combo_box.spec.tsx
@@ -34,7 +34,7 @@ before(() => {
 });
 
 describe('EuiComboBox', () => {
-  describe('Focus management', () => {
+  describe('focus management', () => {
     it('keeps focus on the input box when clicking a disabled item', () => {
       cy.realMount(
         <EuiComboBox
@@ -113,6 +113,37 @@ describe('EuiComboBox', () => {
     });
   });
 
+  describe('inputPopoverProps', () => {
+    it('allows setting a minimum popover width', () => {
+      cy.mount(
+        <EuiComboBox
+          options={[{ label: 'Test' }]}
+          selectedOptions={[]}
+          onChange={() => {}}
+          data-test-subj="combobox"
+          inputPopoverProps={{
+            panelMinWidth: 300,
+            anchorPosition: 'downCenter',
+          }}
+          style={{ margin: '0 auto' }}
+        />
+      );
+      cy.get('[data-test-subj="comboBoxInput"]').click();
+
+      cy.get('[data-popover-panel]')
+        .should('have.css', 'inline-size', '400px')
+        .should('have.css', 'left', '50px');
+
+      cy.get('[data-test-subj="combobox"]').then(
+        ($el) => ($el[0].style.width = '200px')
+      );
+
+      cy.get('[data-popover-panel]')
+        .should('have.css', 'inline-size', '300px')
+        .should('have.css', 'left', '100px');
+    });
+  });
+
   describe('truncation', () => {
     const sharedProps = {
       style: { width: 200 },
@@ -201,7 +232,6 @@ describe('EuiComboBox', () => {
       });
     });
   });
-
   describe('selection', () => {
     const defaultOptions: Array<EuiComboBoxOptionOption<{}>> = [
       { label: 'Item 1' },

diff --git a/src/components/combo_box/combo_box.tsx b/src/components/combo_box/combo_box.tsx
@@ -21,7 +21,7 @@ import classNames from 'classnames';
 
 import { htmlIdGenerator, keys } from '../../services';
 import { CommonProps } from '../common';
-import { EuiInputPopover } from '../popover';
+import { EuiInputPopover, EuiInputPopoverProps } from '../popover';
 import { EuiI18n } from '../i18n';
 import { EuiFormControlLayoutProps } from '../form';
 import type { EuiTextTruncateProps } from '../text_truncate';
@@ -162,6 +162,13 @@ export interface _EuiComboBoxProps<T>
    * text will always take precedence.
    */
   truncationProps?: Partial<Omit<EuiTextTruncateProps, 'text' | 'children'>>;
+  /**
+   * Allows customizing the underlying EuiInputPopover component
+   * (except for props that control state).
+   */
+  inputPopoverProps?: Partial<
+    Omit<EuiInputPopoverProps, 'input' | 'isOpen' | 'closePopover'>
+  >;
 }
 
 /**
@@ -710,6 +717,7 @@ export class EuiComboBox<T> extends Component<
       append,
       autoFocus,
       truncationProps,
+      inputPopoverProps,
       'aria-label': ariaLabel,
       'aria-labelledby': ariaLabelledby,
       ...rest
@@ -810,12 +818,13 @@ export class EuiComboBox<T> extends Component<
         ref={this.comboBoxRefCallback}
       >
         <EuiInputPopover
-          isOpen={isListOpen}
-          closePopover={this.closeList}
           fullWidth={fullWidth}
           panelPaddingSize="none"
           disableFocusTrap={true}
           closeOnScroll={true}
+          {...inputPopoverProps}
+          isOpen={isListOpen}
+          closePopover={this.closeList}
           input={
             <EuiComboBoxInput
               compressed={compressed}