fix(pf4): added multi clearable downshift select

Author: Hyperkid123

packages/pf4-component-mapper/demo/demo-schemas/select-schema.js

@@ -40,6 +40,15 @@ const selectSchema = {
       isMulti: true,
       isSearchable: true
     },
+    {
+      component: componentTypes.SELECT,
+      name: 'multi-clearable-searchable-select',
+      label: 'Searchable clearable multi select',
+      options,
+      isMulti: true,
+      isSearchable: true,
+      isClearable: true
+    },
     {
       component: componentTypes.SELECT,
       name: 'simple-select',

packages/pf4-component-mapper/src/common/select/clear-indicator.js

@@ -5,15 +5,17 @@ import { TimesCircleIcon } from '@patternfly/react-icons';
 import './clear-indicator.scss';
 
 const ClearIndicator = ({ clearSelection }) => (
-  <span
+  <button
     onClick={(event) => {
       clearSelection();
       event.stopPropagation();
     }}
-    className="ddorg__pf4-component-mapper__select-clear-indicator pf-u-pr-md pf-u-pl-md"
+    className="pf-c-button pf-m-plain pf-c-select__toggle-clear pf-u-p-0"
+    type="button"
+    aria-label="Clear all"
   >
     <TimesCircleIcon />
-  </span>
+  </button>
 );
 
 ClearIndicator.propTypes = {

packages/pf4-component-mapper/src/common/select/select.js

@@ -69,7 +69,7 @@ const itemToString = (value, isMulti, showMore, handleShowMore, handleChange) =>
 const filterOptions = (options, filterValue = '') => options.filter(({ label }) => label.toLowerCase().includes(filterValue.toLowerCase()));
 
 const getValue = (isMulti, option, value) => {
-  if (!isMulti) {
+  if (!isMulti || !option) {
     return option;
   }
 
@@ -132,8 +132,8 @@ const InternalSelect = ({
               <div className="pf-c-select_toggle-wrapper ddorg__pf4-component-mapper__select-toggle-wrapper">
                 <ValueContainer placeholder={placeholder} value={itemToString(selectedItem, isMulti, showMore, handleShowMore, handleChange)} />
               </div>
+              {isClearable && parsedValue && <ClearIndicator clearSelection={clearSelection} />}
               <span className="pf-c-select__toggle-arrow">
-                {isClearable && parsedValue && <ClearIndicator clearSelection={clearSelection} />}
                 <CaretDownIcon />
               </span>
             </div>