diff --git a/x-pack/plugins/canvas/canvas_plugin_src/renderers/filters/dropdown_filter/component/__stories__/__snapshots__/dropdown_filter.stories.storyshot b/x-pack/plugins/canvas/canvas_plugin_src/renderers/filters/dropdown_filter/component/__stories__/__snapshots__/dropdown_filter.stories.storyshot index a14ad820586eb..52694d3b04089 100644 --- a/x-pack/plugins/canvas/canvas_plugin_src/renderers/filters/dropdown_filter/component/__stories__/__snapshots__/dropdown_filter.stories.storyshot +++ b/x-pack/plugins/canvas/canvas_plugin_src/renderers/filters/dropdown_filter/component/__stories__/__snapshots__/dropdown_filter.stories.storyshot @@ -4,23 +4,42 @@ exports[`Storyshots renderers/DropdownFilter default 1`] = `
- - + +
+ + +
+
+ `; @@ -28,41 +47,60 @@ exports[`Storyshots renderers/DropdownFilter with choices 1`] = `
- - + +
+ + +
+
+ `; @@ -70,41 +108,60 @@ exports[`Storyshots renderers/DropdownFilter with choices and new value 1`] = `
- - + +
+ + +
+
+ `; @@ -112,41 +169,60 @@ exports[`Storyshots renderers/DropdownFilter with choices and value 1`] = `
- - + +
+ + +
+
+ `; @@ -154,22 +230,41 @@ exports[`Storyshots renderers/DropdownFilter with new value 1`] = `
- - + +
+ + +
+
+ `; diff --git a/x-pack/plugins/canvas/canvas_plugin_src/renderers/filters/dropdown_filter/component/dropdown_filter.scss b/x-pack/plugins/canvas/canvas_plugin_src/renderers/filters/dropdown_filter/component/dropdown_filter.scss index 425caee256d36..aa7c176f9d389 100644 --- a/x-pack/plugins/canvas/canvas_plugin_src/renderers/filters/dropdown_filter/component/dropdown_filter.scss +++ b/x-pack/plugins/canvas/canvas_plugin_src/renderers/filters/dropdown_filter/component/dropdown_filter.scss @@ -1,31 +1,3 @@ .canvasDropdownFilter { - width: 100%; - font-size: inherit; position: relative; - - .canvasDropdownFilter__select { - background-color: $euiColorEmptyShade; - width: 100%; - padding: $euiSizeXS $euiSize; - border: $euiBorderThin; - border-radius: $euiBorderRadius; - appearance: none; - font-size: inherit; - color: $euiTextColor; - - &:after { - display: none; - } - - &:focus { - box-shadow: none; - } - } - - .canvasDropdownFilter__icon { - position: absolute; - right: $euiSizeS; - top: $euiSizeS; - pointer-events: none; - } } diff --git a/x-pack/plugins/canvas/canvas_plugin_src/renderers/filters/dropdown_filter/component/dropdown_filter.tsx b/x-pack/plugins/canvas/canvas_plugin_src/renderers/filters/dropdown_filter/component/dropdown_filter.tsx index 5b020a2e194dc..ec9db940c00a1 100644 --- a/x-pack/plugins/canvas/canvas_plugin_src/renderers/filters/dropdown_filter/component/dropdown_filter.tsx +++ b/x-pack/plugins/canvas/canvas_plugin_src/renderers/filters/dropdown_filter/component/dropdown_filter.tsx @@ -7,7 +7,7 @@ import React, { ChangeEvent, FocusEvent, FunctionComponent, useEffect, useState } from 'react'; import PropTypes from 'prop-types'; -import { EuiIcon } from '@elastic/eui'; +import { EuiSelect, EuiSelectOption } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; const strings = { @@ -57,30 +57,29 @@ export const DropdownFilter: FunctionComponent = ({ } }; - const dropdownOptions = options.map((option) => { + const dropdownOptions: EuiSelectOption[] = options.map((option) => { const { text } = option; const optionValue = option.value; const selected = optionValue === value; - return ( - - ); + return { + text, + selected, + value: optionValue, + }; }); - /* eslint-disable jsx-a11y/no-onchange */ return (
- - + options={dropdownOptions} + fullWidth + compressed + />
); }; diff --git a/x-pack/plugins/canvas/canvas_plugin_src/renderers/filters/dropdown_filter/index.tsx b/x-pack/plugins/canvas/canvas_plugin_src/renderers/filters/dropdown_filter/index.tsx index d956c6291c609..001f2dc7652d2 100644 --- a/x-pack/plugins/canvas/canvas_plugin_src/renderers/filters/dropdown_filter/index.tsx +++ b/x-pack/plugins/canvas/canvas_plugin_src/renderers/filters/dropdown_filter/index.tsx @@ -47,7 +47,10 @@ export const dropdownFilter: RendererFactory = () => ({ render(domNode, config, handlers) { let filterExpression = handlers.getFilter(); - if (filterExpression === undefined || !filterExpression.includes('exactly')) { + if ( + filterExpression !== '' && + (filterExpression === undefined || !filterExpression.includes('exactly')) + ) { filterExpression = ''; handlers.setFilter(filterExpression); } else if (filterExpression !== '') { diff --git a/x-pack/plugins/canvas/public/components/workpad_page/workpad_interactive_page/index.js b/x-pack/plugins/canvas/public/components/workpad_page/workpad_interactive_page/index.js index f03547df8de99..25e64091f4aec 100644 --- a/x-pack/plugins/canvas/public/components/workpad_page/workpad_interactive_page/index.js +++ b/x-pack/plugins/canvas/public/components/workpad_page/workpad_interactive_page/index.js @@ -92,6 +92,16 @@ const isEmbeddableBody = (element) => { } }; +const isEuiSelect = (element) => { + const hasClosest = typeof element.closest === 'function'; + + if (hasClosest) { + return element.closest(`.euiSelect`); + } else { + return closest.call(element, `.euiSelect`); + } +}; + // Some elements in an embeddable may be portaled out of the embeddable container. // We do not want clicks on those to trigger drags, etc, in the workpad. This function // will check to make sure the clicked item is actually in the container @@ -243,7 +253,8 @@ export const InteractivePage = compose( })), withProps((...props) => ({ ...props, - canDragElement: (element) => !isEmbeddableBody(element) && isInWorkpad(element), + canDragElement: (element) => + !isEmbeddableBody(element) && !isEuiSelect(element) && isInWorkpad(element), })), withHandlers(eventHandlers), // Captures user intent, needs to have reconciled state () => InteractiveComponent