diff --git a/CHANGELOG.md b/CHANGELOG.md
index a7ed80876e82..3bf25b13bacb 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,13 +2,13 @@
- Updated `barSeriesStyle.displayValue` of the elastic-charts `Theme` for better default styles ([#4845](https://github.com/elastic/eui/pull/4845))
- Updated `titleProps` and `descriptionProps` on `EuiDescriptionList` to extend `CommonProps` ([#5166](https://github.com/elastic/eui/pull/5166))
+- Added the ability to return `visibleOptions` from `EuiSelectable` by using `onSearch` ([#5178](https://github.com/elastic/eui/pull/5178))
**Bug fixes**
- Fixed `EuiDataGrid` focus ring to be contained in the cell ([#5194](https://github.com/elastic/eui/pull/5194))
- Fixed `EuiDataGrid` cells when focused getting a higher `z-index` which was causing long content to overlap surrounding cells ([#5194](https://github.com/elastic/eui/pull/5194))
-
## [`38.0.0`](https://github.com/elastic/eui/tree/v38.0.0)
- Added optional line numbers to `EuiCodeBlock` ([#4993](https://github.com/elastic/eui/pull/4993))
diff --git a/src-docs/src/views/selectable/props.tsx b/src-docs/src/views/selectable/props.tsx
index 79b50b7e2642..428914e2fa70 100644
--- a/src-docs/src/views/selectable/props.tsx
+++ b/src-docs/src/views/selectable/props.tsx
@@ -2,6 +2,7 @@ import React, { FunctionComponent } from 'react';
import {
EuiSelectableOption,
EuiSelectableOptionsListProps,
+ EuiSelectableSearchableSearchProps,
} from '../../../../src/components/selectable';
import {
@@ -17,6 +18,10 @@ export const EuiSelectableOptionsList: FunctionComponent
);
+export const EuiSelectableSearchProps: FunctionComponent> = () => ;
+
export const Options: FunctionComponent = () => (
);
diff --git a/src-docs/src/views/selectable/selectable_example.js b/src-docs/src/views/selectable/selectable_example.js
index badc2870bdae..5eb74e9f75be 100644
--- a/src-docs/src/views/selectable/selectable_example.js
+++ b/src-docs/src/views/selectable/selectable_example.js
@@ -19,6 +19,7 @@ import {
import {
EuiSelectableOptionProps,
EuiSelectableOptionsList,
+ EuiSelectableSearchProps,
Options,
MetaData,
} from './props';
@@ -153,7 +154,9 @@ export const SelectableExample = {
To add a search component to the list, simply add the{' '}
searchable prop. You can optionally pass in a{' '}
searchProps object which will get passed down to
- the actual EuiFieldSearch used.
+ the actual EuiFieldSearch used. In this example,
+ onSearch will return a second parameter, enabling
+ you to access the list of filtered items
,
snippet: ` = ExclusiveUnion<
*/
searchable: true;
/**
- * Passes props down to the `EuiFieldSearch`
+ * Passes props down to the `EuiFieldSearch`.
+ * See #EuiSelectableSearchProps
*/
- searchProps?: Partial>;
+ searchProps?: EuiSelectableSearchableSearchProps;
+ }
+>;
+
+export type EuiSelectableSearchableSearchProps = Partial<
+ Omit, 'onSearch'> & {
+ onSearch: (
+ searchValue: string,
+ matchingOptions: Array>
+ ) => void;
}
>;
@@ -337,7 +347,7 @@ export class EuiSelectable extends Component<
}
);
if (this.props.searchProps && this.props.searchProps.onSearch) {
- this.props.searchProps.onSearch(searchValue);
+ this.props.searchProps.onSearch(searchValue, visibleOptions);
}
};
@@ -524,7 +534,7 @@ export class EuiSelectable extends Component<
*/
const getAccessibleName = (
props:
- | Partial>
+ | EuiSelectableSearchableSearchProps
| EuiSelectableOptionsListPropsWithDefaults
| undefined,
messageContentId?: string