Merge pull request #661 from data-driven-forms/remove-pf4-select-filter

fix(pf4): fix select lingering filter value

Author: Hyperkid123

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

@@ -43,6 +43,7 @@ const selectSchema = {
       name: 'simple-portal-select',
       label: 'Simple portal select',
       options,
+      isSearchable: true,
       menuIsPortal: true
     },
     {

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

@@ -57,7 +57,9 @@ class App extends React.Component {
                 onSubmit={console.log}
                 initialValues={{
                     'simple-select': 'Kay',
-                    'simple-async-select': 'Jenifer'
+                    'simple-async-select': 'Jenifer',
+                    'simple-searchable-async-select': 'Jenifer',
+                    'simple-portal-select': 'Jenifer'
                 }}
                 componentMapper={{
                     ...componentMapper,

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

@@ -3,8 +3,25 @@ import PropTypes from 'prop-types';
 
 import './input.scss';
 
+const getInputString = (filter, value) => {
+  if (typeof filter === 'string') {
+    return filter;
+  }
+
+  if (typeof value === 'string') {
+    return value;
+  }
+
+  if (Array.isArray(value) && typeof value[0] === 'string') {
+    return value[0];
+  }
+
+  return '';
+};
+
 const Input = ({ inputRef, isSearchable, isDisabled, getInputProps, value, ...props }) => {
   const inputProps = getInputProps({ disabled: isDisabled });
+  const initialInputValue = getInputString(inputProps.value, value);
   return (
     <input
       value=""
@@ -13,7 +30,7 @@ const Input = ({ inputRef, isSearchable, isDisabled, getInputProps, value, ...pr
       ref={inputRef}
       {...{
         ...inputProps,
-        value: inputProps.value || '',
+        value: initialInputValue,
         onKeyDown: (event, ...args) => {
           event.stopPropagation();
           inputProps.onKeyDown(event, ...args);
@@ -29,7 +46,7 @@ Input.propTypes = {
   isSearchable: PropTypes.bool,
   isDisabled: PropTypes.bool,
   getInputProps: PropTypes.func.isRequired,
-  value: PropTypes.string
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)])
 };
 
 export default Input;

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

@@ -81,6 +81,12 @@ const getValue = (isMulti, option, value) => {
 
 const stateReducer = (state, changes, isMulti) => {
   switch (changes.type) {
+    case Downshift.stateChangeTypes.clickButton:
+      return {
+        ...state,
+        ...changes,
+        inputValue: undefined
+      };
     case Downshift.stateChangeTypes.keyDownEnter:
     case Downshift.stateChangeTypes.clickItem:
       return {
@@ -108,6 +114,14 @@ const stateReducer = (state, changes, isMulti) => {
         };
       }
 
+      if (state.isOpen === true && changes.isOpen === false && changes.inputValue) {
+        return {
+          ...state,
+          ...changes,
+          inputValue: ''
+        };
+      }
+
       return {
         ...changes,
         inputValue: state.inputValue

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

@@ -13,7 +13,7 @@ const ValueContainer = ({ value, isMulti, placeholder, getInputProps, isSearchab
   }
 
   if (!isMulti && isSearchable) {
-    return <Input placeholder={placeholder} inputRef={inputRef} getInputProps={getInputProps} />;
+    return <Input placeholder={placeholder} inputRef={inputRef} getInputProps={getInputProps} value={value} />;
   }
 
   return <span className="pf-c-select__toggle-text">{value || placeholder}</span>;