Fixes issuse with dragging drop down. switch dropdown to use euiselect (#113960)

* Fixes issuse with dragging drop down.  switch dropdown to use euiselect

* Update snapshots

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>

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`] = `
 <div
   className="canvasDropdownFilter"
 >
-  <select
-    className="canvasDropdownFilter__select"
-    data-test-subj="canvasDropdownFilter__select"
-    onChange={[Function]}
-    value=""
+  <div
+    className="euiFormControlLayout euiFormControlLayout--fullWidth euiFormControlLayout--compressed"
   >
-    <option
-      aria-selected={false}
-      value="%%CANVAS_MATCH_ALL%%"
+    <div
+      className="euiFormControlLayout__childrenWrapper"
     >
-      -- ANY --
-    </option>
-  </select>
-  <span
-    className="canvasDropdownFilter__icon"
-    data-euiicon-type="arrowDown"
-  />
+      <select
+        className="euiSelect euiSelect--fullWidth euiSelect--compressed canvasDropdownFilter__select"
+        data-test-subj="canvasDropdownFilter__select"
+        onChange={[Function]}
+        onMouseUp={[Function]}
+        value=""
+      >
+        <option
+          selected={false}
+          value="%%CANVAS_MATCH_ALL%%"
+        >
+          -- ANY --
+        </option>
+      </select>
+      <div
+        className="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+      >
+        <span
+          className="euiFormControlLayoutCustomIcon"
+        >
+          <span
+            aria-hidden="true"
+            className="euiFormControlLayoutCustomIcon__icon"
+            data-euiicon-type="arrowDown"
+            size="s"
+          />
+        </span>
+      </div>
+    </div>
+  </div>
 </div>
 `;
 
@@ -28,41 +47,60 @@ exports[`Storyshots renderers/DropdownFilter with choices 1`] = `
 <div
   className="canvasDropdownFilter"
 >
-  <select
-    className="canvasDropdownFilter__select"
-    data-test-subj="canvasDropdownFilter__select"
-    onChange={[Function]}
-    value=""
+  <div
+    className="euiFormControlLayout euiFormControlLayout--fullWidth euiFormControlLayout--compressed"
   >
-    <option
-      aria-selected={false}
-      value="%%CANVAS_MATCH_ALL%%"
+    <div
+      className="euiFormControlLayout__childrenWrapper"
     >
-      -- ANY --
-    </option>
-    <option
-      aria-selected={false}
-      value="1"
-    >
-      Item One
-    </option>
-    <option
-      aria-selected={false}
-      value="2"
-    >
-      Item Two
-    </option>
-    <option
-      aria-selected={false}
-      value="3"
-    >
-      Item Three
-    </option>
-  </select>
-  <span
-    className="canvasDropdownFilter__icon"
-    data-euiicon-type="arrowDown"
-  />
+      <select
+        className="euiSelect euiSelect--fullWidth euiSelect--compressed canvasDropdownFilter__select"
+        data-test-subj="canvasDropdownFilter__select"
+        onChange={[Function]}
+        onMouseUp={[Function]}
+        value=""
+      >
+        <option
+          selected={false}
+          value="%%CANVAS_MATCH_ALL%%"
+        >
+          -- ANY --
+        </option>
+        <option
+          selected={false}
+          value="1"
+        >
+          Item One
+        </option>
+        <option
+          selected={false}
+          value="2"
+        >
+          Item Two
+        </option>
+        <option
+          selected={false}
+          value="3"
+        >
+          Item Three
+        </option>
+      </select>
+      <div
+        className="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+      >
+        <span
+          className="euiFormControlLayoutCustomIcon"
+        >
+          <span
+            aria-hidden="true"
+            className="euiFormControlLayoutCustomIcon__icon"
+            data-euiicon-type="arrowDown"
+            size="s"
+          />
+        </span>
+      </div>
+    </div>
+  </div>
 </div>
 `;
 
@@ -70,41 +108,60 @@ exports[`Storyshots renderers/DropdownFilter with choices and new value 1`] = `
 <div
   className="canvasDropdownFilter"
 >
-  <select
-    className="canvasDropdownFilter__select"
-    data-test-subj="canvasDropdownFilter__select"
-    onChange={[Function]}
-    value="selectedValue"
+  <div
+    className="euiFormControlLayout euiFormControlLayout--fullWidth euiFormControlLayout--compressed"
   >
-    <option
-      aria-selected={false}
-      value="%%CANVAS_MATCH_ALL%%"
+    <div
+      className="euiFormControlLayout__childrenWrapper"
     >
-      -- ANY --
-    </option>
-    <option
-      aria-selected={false}
-      value="1"
-    >
-      Item One
-    </option>
-    <option
-      aria-selected={false}
-      value="2"
-    >
-      Item Two
-    </option>
-    <option
-      aria-selected={false}
-      value="3"
-    >
-      Item Three
-    </option>
-  </select>
-  <span
-    className="canvasDropdownFilter__icon"
-    data-euiicon-type="arrowDown"
-  />
+      <select
+        className="euiSelect euiSelect--fullWidth euiSelect--compressed canvasDropdownFilter__select"
+        data-test-subj="canvasDropdownFilter__select"
+        onChange={[Function]}
+        onMouseUp={[Function]}
+        value="selectedValue"
+      >
+        <option
+          selected={false}
+          value="%%CANVAS_MATCH_ALL%%"
+        >
+          -- ANY --
+        </option>
+        <option
+          selected={false}
+          value="1"
+        >
+          Item One
+        </option>
+        <option
+          selected={false}
+          value="2"
+        >
+          Item Two
+        </option>
+        <option
+          selected={false}
+          value="3"
+        >
+          Item Three
+        </option>
+      </select>
+      <div
+        className="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+      >
+        <span
+          className="euiFormControlLayoutCustomIcon"
+        >
+          <span
+            aria-hidden="true"
+            className="euiFormControlLayoutCustomIcon__icon"
+            data-euiicon-type="arrowDown"
+            size="s"
+          />
+        </span>
+      </div>
+    </div>
+  </div>
 </div>
 `;
 
@@ -112,41 +169,60 @@ exports[`Storyshots renderers/DropdownFilter with choices and value 1`] = `
 <div
   className="canvasDropdownFilter"
 >
-  <select
-    className="canvasDropdownFilter__select"
-    data-test-subj="canvasDropdownFilter__select"
-    onChange={[Function]}
-    value="Item Two"
+  <div
+    className="euiFormControlLayout euiFormControlLayout--fullWidth euiFormControlLayout--compressed"
   >
-    <option
-      aria-selected={false}
-      value="%%CANVAS_MATCH_ALL%%"
+    <div
+      className="euiFormControlLayout__childrenWrapper"
     >
-      -- ANY --
-    </option>
-    <option
-      aria-selected={false}
-      value="1"
-    >
-      Item One
-    </option>
-    <option
-      aria-selected={false}
-      value="2"
-    >
-      Item Two
-    </option>
-    <option
-      aria-selected={false}
-      value="3"
-    >
-      Item Three
-    </option>
-  </select>
-  <span
-    className="canvasDropdownFilter__icon"
-    data-euiicon-type="arrowDown"
-  />
+      <select
+        className="euiSelect euiSelect--fullWidth euiSelect--compressed canvasDropdownFilter__select"
+        data-test-subj="canvasDropdownFilter__select"
+        onChange={[Function]}
+        onMouseUp={[Function]}
+        value="Item Two"
+      >
+        <option
+          selected={false}
+          value="%%CANVAS_MATCH_ALL%%"
+        >
+          -- ANY --
+        </option>
+        <option
+          selected={false}
+          value="1"
+        >
+          Item One
+        </option>
+        <option
+          selected={false}
+          value="2"
+        >
+          Item Two
+        </option>
+        <option
+          selected={false}
+          value="3"
+        >
+          Item Three
+        </option>
+      </select>
+      <div
+        className="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+      >
+        <span
+          className="euiFormControlLayoutCustomIcon"
+        >
+          <span
+            aria-hidden="true"
+            className="euiFormControlLayoutCustomIcon__icon"
+            data-euiicon-type="arrowDown"
+            size="s"
+          />
+        </span>
+      </div>
+    </div>
+  </div>
 </div>
 `;
 
@@ -154,22 +230,41 @@ exports[`Storyshots renderers/DropdownFilter with new value 1`] = `
 <div
   className="canvasDropdownFilter"
 >
-  <select
-    className="canvasDropdownFilter__select"
-    data-test-subj="canvasDropdownFilter__select"
-    onChange={[Function]}
-    value="selectedValue"
+  <div
+    className="euiFormControlLayout euiFormControlLayout--fullWidth euiFormControlLayout--compressed"
   >
-    <option
-      aria-selected={false}
-      value="%%CANVAS_MATCH_ALL%%"
+    <div
+      className="euiFormControlLayout__childrenWrapper"
     >
-      -- ANY --
-    </option>
-  </select>
-  <span
-    className="canvasDropdownFilter__icon"
-    data-euiicon-type="arrowDown"
-  />
+      <select
+        className="euiSelect euiSelect--fullWidth euiSelect--compressed canvasDropdownFilter__select"
+        data-test-subj="canvasDropdownFilter__select"
+        onChange={[Function]}
+        onMouseUp={[Function]}
+        value="selectedValue"
+      >
+        <option
+          selected={false}
+          value="%%CANVAS_MATCH_ALL%%"
+        >
+          -- ANY --
+        </option>
+      </select>
+      <div
+        className="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+      >
+        <span
+          className="euiFormControlLayoutCustomIcon"
+        >
+          <span
+            aria-hidden="true"
+            className="euiFormControlLayoutCustomIcon__icon"
+            data-euiicon-type="arrowDown"
+            size="s"
+          />
+        </span>
+      </div>
+    </div>
+  </div>
 </div>
 `;

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;
-  }
 }

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<Props> = ({
     }
   };
 
-  const dropdownOptions = options.map((option) => {
+  const dropdownOptions: EuiSelectOption[] = options.map((option) => {
     const { text } = option;
     const optionValue = option.value;
     const selected = optionValue === value;
 
-    return (
-      <option key={optionValue} value={optionValue} aria-selected={selected}>
-        {text}
-      </option>
-    );
+    return {
+      text,
+      selected,
+      value: optionValue,
+    };
   });
 
-  /* eslint-disable jsx-a11y/no-onchange */
   return (
     <div className="canvasDropdownFilter">
-      <select
+      <EuiSelect
         className="canvasDropdownFilter__select"
         value={value}
         onChange={changeHandler}
         data-test-subj="canvasDropdownFilter__select"
-      >
-        {dropdownOptions}
-      </select>
-      <EuiIcon className="canvasDropdownFilter__icon" type="arrowDown" />
+        options={dropdownOptions}
+        fullWidth
+        compressed
+      />
     </div>
   );
 };

x-pack/plugins/canvas/canvas_plugin_src/renderers/filters/dropdown_filter/index.tsx

@@ -47,7 +47,10 @@ export const dropdownFilter: RendererFactory<Config> = () => ({
   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 !== '') {

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