+`;
+
exports[`props isClearable=false disallows user from clearing input when no options are selected 1`] = `
{
expect(component).toMatchSnapshot();
});
+
+ test('icon is rendered', () => {
+ const component = mount(
+
+ );
+
+ expect(component).toMatchSnapshot();
+
+ const icon = findTestSubject(component, 'comboBoxIcon');
+ expect(icon).toBeDefined();
+ expect(icon.render().attr('data-ouiicon-type')).toBe('search');
+ });
+
+ test('custom icon is rendered', () => {
+ const component = mount(
+
+ );
+
+ expect(component).toMatchSnapshot();
+
+ const icon = findTestSubject(component, 'comboBoxIcon');
+ expect(icon).toBeDefined();
+ expect(icon.render().attr('data-ouiicon-type')).toBe('menu');
+ });
});
test('does not show multiple checkmarks with duplicate labels', () => {
diff --git a/src/components/combo_box/combo_box.tsx b/src/components/combo_box/combo_box.tsx
index 0495deb723..40e37e3086 100644
--- a/src/components/combo_box/combo_box.tsx
+++ b/src/components/combo_box/combo_box.tsx
@@ -70,6 +70,7 @@ import AutosizeInput from 'react-input-autosize';
import { CommonProps } from '../common';
import { OuiFormControlLayoutProps } from '../form';
import { getElementZIndex } from '../../services/popover';
+import { IconType } from '../icon';
type DrillProps
= Pick<
OuiComboBoxOptionsListProps,
@@ -98,6 +99,7 @@ export interface _OuiComboBoxProps
* When `true` expands to the entire width available
*/
fullWidth: boolean;
+ icon?: IconType | boolean;
id?: string;
inputRef?: RefCallback;
/**
@@ -924,6 +926,7 @@ export class OuiComboBox extends Component<
compressed,
customOptionText,
fullWidth,
+ icon,
id,
inputRef,
isClearable,
@@ -1051,6 +1054,7 @@ export class OuiComboBox extends Component<
}
fullWidth={fullWidth}
hasSelectedOptions={selectedOptions.length > 0}
+ icon={icon}
id={id}
inputRef={this.searchInputRefCallback}
isDisabled={isDisabled}
diff --git a/src/components/combo_box/combo_box_input/combo_box_input.tsx b/src/components/combo_box/combo_box_input/combo_box_input.tsx
index a172211673..ac4428372b 100644
--- a/src/components/combo_box/combo_box_input/combo_box_input.tsx
+++ b/src/components/combo_box/combo_box_input/combo_box_input.tsx
@@ -42,6 +42,7 @@ import {
OuiFormControlLayout,
OuiFormControlLayoutProps,
} from '../../form/form_control_layout';
+import { OuiIcon, IconType } from '../../icon';
import { OuiComboBoxPill } from './combo_box_pill';
import { htmlIdGenerator } from '../../../services';
import { OuiFormControlLayoutIconsProps } from '../../form/form_control_layout/form_control_layout_icons';
@@ -59,6 +60,7 @@ export interface OuiComboBoxInputProps extends CommonProps {
focusedOptionId?: string;
fullWidth?: boolean;
hasSelectedOptions: boolean;
+ icon?: IconType | boolean;
id?: string;
inputRef?: RefCallback;
isDisabled?: boolean;
@@ -151,6 +153,7 @@ export class OuiComboBoxInput extends Component<
focusedOptionId,
fullWidth,
hasSelectedOptions,
+ icon: iconProp,
id,
inputRef,
isDisabled,
@@ -257,9 +260,9 @@ export class OuiComboBoxInput extends Component<
};
}
- let icon: OuiFormControlLayoutIconsProps['icon'];
+ let formControlIcon: OuiFormControlLayoutIconsProps['icon'];
if (!noIcon) {
- icon = {
+ formControlIcon = {
'aria-label': isListOpen
? 'Close list of options'
: 'Open list of options',
@@ -272,6 +275,20 @@ export class OuiComboBoxInput extends Component<
};
}
+ let icon;
+ if (!!iconProp) {
+ const iconClasses = classNames('ouiComboBoxPill', 'ouiComboBoxIcon');
+
+ icon = (
+
+ );
+ }
+
const wrapClasses = classNames('ouiComboBox__inputWrap', {
'ouiComboBox__inputWrap--compressed': compressed,
'ouiComboBox__inputWrap--fullWidth': fullWidth,
@@ -283,7 +300,7 @@ export class OuiComboBoxInput extends Component<
return (
extends Component<
onClick={onClick}
tabIndex={-1} // becomes onBlur event's relatedTarget, otherwise relatedTarget is null when clicking on this div
>
+ {icon}
{!singleSelection || !searchValue ? pills : null}
{placeholderMessage}