Merge pull request #660 from data-driven-forms/pf4-select-updates

Pf4 select updates

Author: Hyperkid123

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

@@ -164,6 +164,5 @@ const selectSchema = {
 };
 
 export default {
-  ...selectSchema,
-  fields: [selectSchema.fields[0]]
+  ...selectSchema
 };

packages/pf4-component-mapper/demo/index.js

@@ -56,7 +56,8 @@ class App extends React.Component {
             <FormRenderer
                 onSubmit={console.log}
                 initialValues={{
-                    'simple-select': 'Kay'
+                    'simple-select': 'Kay',
+                    'simple-async-select': 'Jenifer'
                 }}
                 componentMapper={{
                     ...componentMapper,

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

@@ -14,6 +14,10 @@ const Input = ({ inputRef, isSearchable, isDisabled, getInputProps, value, ...pr
       {...{
         ...inputProps,
         value: inputProps.value || '',
+        onKeyDown: (event, ...args) => {
+          event.stopPropagation();
+          inputProps.onKeyDown(event, ...args);
+        },
         onChange: inputProps.onChange || Function
       }}
     />

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

@@ -63,7 +63,12 @@ const itemToString = (value, isMulti, showMore, handleShowMore, handleChange) =>
   return value;
 };
 
-const filterOptions = (options, filterValue = '') => options.filter(({ label }) => label.toLowerCase().includes(filterValue.toLowerCase()));
+// TODO fix the value of internal select not to be an array all the time. It forces the filter value to be an array and it crashes sometimes.
+const filterOptions = (options, filterValue = '') =>
+  options.filter(({ label }) => {
+    const filter = Array.isArray(filterValue) && filterValue.length > 0 ? filterValue[0] : filterValue;
+    return label.toLowerCase().includes(filter.toLowerCase());
+  });
 
 const getValue = (isMulti, option, value) => {
   if (!isMulti || !option) {