diff --git a/src-docs/src/views/combo_box/combo_box_example.js b/src-docs/src/views/combo_box/combo_box_example.js
index 2a2b51fe7af..2fcce4ad73c 100644
--- a/src-docs/src/views/combo_box/combo_box_example.js
+++ b/src-docs/src/views/combo_box/combo_box_example.js
@@ -161,11 +161,19 @@ export const ComboBoxExample = {
code: renderOptionHtml,
}],
text: (
-
- You can provide a renderOption prop which will accept option
- and searchValue arguments. Use the value prop of the
- option object to store metadata about the option for use in this callback.
-
+
+
+ You can provide a renderOption prop which will accept option
+ and searchValue arguments. Use the value prop of the
+ option object to store metadata about the option for use in this callback.
+
+
+
+ Note: virtualization (above) requires that each option have the same height.
+ Ensure that you render the options so that wrapping text is truncated instead of causing
+ the height of the option to change.
+
+
),
props: { EuiComboBox },
demo: ,
diff --git a/src-docs/src/views/combo_box/render_option.js b/src-docs/src/views/combo_box/render_option.js
index 2d39f806f25..611a96eddf8 100644
--- a/src-docs/src/views/combo_box/render_option.js
+++ b/src-docs/src/views/combo_box/render_option.js
@@ -110,11 +110,11 @@ export default class extends Component {
}));
};
- renderOption = (option, searchValue) => {
+ renderOption = (option, searchValue, contentClassName) => {
const { color, label, value } = option;
return (
-
+
{label}
diff --git a/src/components/combo_box/combo_box_options_list/_combo_box_option.scss b/src/components/combo_box/combo_box_options_list/_combo_box_option.scss
index f38453417b4..dcfc0ae77a8 100644
--- a/src/components/combo_box/combo_box_options_list/_combo_box_option.scss
+++ b/src/components/combo_box/combo_box_options_list/_combo_box_option.scss
@@ -1,6 +1,6 @@
.euiComboBoxOption {
font-size: $euiFontSizeS;
- padding: $euiSizeXS $euiSizeS;
+ padding: $euiSizeXS $euiSizeS $euiSizeXS #{$euiSizeM + $euiSizeXS};
width: 100%;
text-align: left;
border: $euiBorderThin;
@@ -24,3 +24,9 @@
}
}
}
+
+ .euiComboBoxOption__content {
+ text-overflow: ellipsis;
+ overflow: hidden;
+ white-space: nowrap;
+ }
diff --git a/src/components/combo_box/combo_box_options_list/_combo_box_options_list.scss b/src/components/combo_box/combo_box_options_list/_combo_box_options_list.scss
index 78f41468ead..99876d79ab0 100644
--- a/src/components/combo_box/combo_box_options_list/_combo_box_options_list.scss
+++ b/src/components/combo_box/combo_box_options_list/_combo_box_options_list.scss
@@ -11,6 +11,10 @@
z-index: $euiZComboBox;
position: absolute; /* 2 */
top: 0; /* 2 */
+
+ .ReactVirtualized__List {
+ @include euiScrollBar;
+ }
}
.euiComboBoxOptionsList--bottom {
@@ -34,7 +38,3 @@
max-height: 200px;
overflow: hidden;
}
-
- .ReactVirtualized__List {
- @include euiScrollBar;
- }
diff --git a/src/components/combo_box/combo_box_options_list/_combo_box_title.scss b/src/components/combo_box/combo_box_options_list/_combo_box_title.scss
index 25934ca25ed..253c5e0ed62 100644
--- a/src/components/combo_box/combo_box_options_list/_combo_box_title.scss
+++ b/src/components/combo_box/combo_box_options_list/_combo_box_title.scss
@@ -4,7 +4,7 @@
*/
.euiComboBoxTitle {
font-size: $euiFontSizeXS;
- padding: ($euiSizeXS + $euiSizeS - 1px) $euiSizeS $euiSizeXS 0; /* 1 */
+ padding: ($euiSizeXS + $euiSizeS - 1px) $euiSizeS $euiSizeXS; /* 1 */
width: 100%;
font-weight: $euiFontWeightBold;
color: $euiColorFullShade;
diff --git a/src/components/combo_box/combo_box_options_list/combo_box_option.js b/src/components/combo_box/combo_box_options_list/combo_box_option.js
index 184712686a9..f8ca3ed15c9 100644
--- a/src/components/combo_box/combo_box_options_list/combo_box_option.js
+++ b/src/components/combo_box/combo_box_options_list/combo_box_option.js
@@ -36,7 +36,7 @@ export class EuiComboBoxOption extends Component {
children,
className,
optionRef,
- option, // eslint-disable-line no-unused-vars
+ option,
onClick, // eslint-disable-line no-unused-vars
onEnterKey, // eslint-disable-line no-unused-vars
disabled,
@@ -48,6 +48,10 @@ export class EuiComboBoxOption extends Component {
className
);
+ const {
+ label,
+ } = option;
+
return (
{children}
diff --git a/src/components/combo_box/combo_box_options_list/combo_box_options_list.js b/src/components/combo_box/combo_box_options_list/combo_box_options_list.js
index 50282591282..1163e1538f0 100644
--- a/src/components/combo_box/combo_box_options_list/combo_box_options_list.js
+++ b/src/components/combo_box/combo_box_options_list/combo_box_options_list.js
@@ -19,6 +19,8 @@ const positionToClassNameMap = {
const POSITIONS = Object.keys(positionToClassNameMap);
+const OPTION_CONTENT_CLASSNAME = 'euiComboBoxOption__content';
+
export class EuiComboBoxOptionsList extends Component {
static propTypes = {
options: PropTypes.array,
@@ -143,8 +145,6 @@ export class EuiComboBoxOptionsList extends Component {
) : undefined;
- const groupLabelToGroupMap = {};
-
const optionHeight = 27; // TODO dynamically figure this out
const numVisiableOptions = matchingOptions.length < 7 ? matchingOptions.length : 7;
const height = numVisiableOptions * optionHeight;
@@ -184,8 +184,8 @@ export class EuiComboBoxOptionsList extends Component {
optionRef={optionRef.bind(this, index)}
{...rest}
>
- {renderOption ? renderOption(option, searchValue) : (
- {label}
+ {renderOption ? renderOption(option, searchValue, OPTION_CONTENT_CLASSNAME) : (
+ {label}
)}