Combobox fixes (#1183)

elastic · Sep 11, 2018 · 1ae816b · 1ae816b
1 parent 6c02111
commit 1ae816b
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 2 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -3,6 +3,10 @@
 - Added `euiFacetButton` and `euiFacetGroup` ([#1167](https://github.com/elastic/eui/pull/1167))
 - Added `width` prop to `EuiContextMenu` panels ([#1173](https://github.com/elastic/eui/pull/1173))
 
+**Bug fixes**
+
+- Fixed `onClickAriaLabel` console error stemming from `EuiComboBoxPill`  ([#1183](https://github.com/elastic/eui/pull/1183))
+
 ## [`3.10.0`](https://github.com/elastic/eui/tree/v3.10.0)
 
 - Added `maxWidth` prop to `EuiModal` ([#1165](https://github.com/elastic/eui/pull/1165))

diff --git a/src/components/combo_box/combo_box_input/_combo_box_pill.scss b/src/components/combo_box/combo_box_input/_combo_box_pill.scss
@@ -5,6 +5,7 @@
   line-height: $euiSizeL - 2px;
 
   &--plainText {
+    line-height: $euiSizeL;
     font-size: $euiFontSizeS;
     font-family: $euiFontFamily;
     padding: 0 $euiSizeXS;

diff --git a/src/components/combo_box/combo_box_input/combo_box_pill.js b/src/components/combo_box/combo_box_input/combo_box_pill.js
@@ -12,6 +12,8 @@ export class EuiComboBoxPill extends Component {
     color: PropTypes.string,
     onClose: PropTypes.func,
     asPlainText: PropTypes.bool,
+    onClick: PropTypes.func,
+    onClickAriaLabel: PropTypes.string,
   };
 
   static defaultProps = {
@@ -30,6 +32,8 @@ export class EuiComboBoxPill extends Component {
       option, // eslint-disable-line no-unused-vars
       onClose, // eslint-disable-line no-unused-vars
       color,
+      onClick,
+      onClickAriaLabel,
       asPlainText,
       ...rest
     } = this.props;
@@ -54,6 +58,8 @@ export class EuiComboBoxPill extends Component {
           closeButtonProps={{
             tabIndex: '-1',
           }}
+          onClick={onClick}
+          onClickAriaLabel={onClickAriaLabel}
           {...rest}
         >
           {children}
@@ -62,11 +68,22 @@ export class EuiComboBoxPill extends Component {
     }
 
     if (asPlainText) {
-      return <span className={classes} {...rest}>{children}</span>;
+      return (
+        <span className={classes} {...rest}>
+          {children}
+        </span>
+      );
     }
 
     return (
-      <EuiBadge className={classes} title={children} color={color} {...rest}>
+      <EuiBadge
+        className={classes}
+        title={children}
+        color={color}
+        {...rest}
+        onClick={onClick}
+        onClickAriaLabel={onClickAriaLabel}
+      >
         {children}
       </EuiBadge>
     );