fix(pf3): update select for newewst common

Author: rvsia

packages/common/src/select/index.js

@@ -40,6 +40,7 @@ const Select = ({
   noOptionsMessage,
   value,
   onChange,
+  loadOptionsChangeCounter,
   ...props
 }) => {
   const [state, dispatch] = useReducer(reducer, {
@@ -53,12 +54,12 @@ const Select = ({
     dispatch({ type: 'startLoading' });
 
     return loadOptions().then((data) => {
-      if (Array.isArray(value)) {
+      if (value && Array.isArray(value)) {
         const selectValue = value.filter((value) =>
           typeof value === 'object' ? data.find((option) => value.value === option.value) : data.find((option) => value === option.value)
         );
         onChange(selectValue.length === 0 ? undefined : selectValue);
-      } else if (!data.find(({ value: internalValue }) => internalValue === value)) {
+      } else if (value && !data.find(({ value: internalValue }) => internalValue === value)) {
         onChange(undefined);
       }
 
@@ -84,11 +85,11 @@ const Select = ({
     if (loadOptionsStr && state.isMounted) {
       updateOptions();
     }
-  }, [loadOptionsStr]);
+  }, [loadOptionsStr, loadOptionsChangeCounter]);
 
   useEffect(() => {
     if (state.isMounted) {
-      if (!propsOptions.map(({ value }) => value).includes(value)) {
+      if (value && !propsOptions.map(({ value }) => value).includes(value)) {
         onChange(undefined);
       }
 
@@ -97,11 +98,20 @@ const Select = ({
   }, [propsOptions]);
 
   if (state.isLoading) {
-    return <ReactSelect isDisabled={true} placeholder={loadingMessage} options={state.options} {...loadingProps} />;
+    return (
+      <ReactSelect
+        {...props}
+        classNamePrefix={classNamePrefix}
+        isDisabled={true}
+        placeholder={loadingMessage}
+        options={state.options}
+        {...loadingProps}
+      />
+    );
   }
 
   const onInputChange = (inputValue) => {
-    if (loadOptions && state.promises[inputValue] === undefined) {
+    if (inputValue && loadOptions && state.promises[inputValue] === undefined && props.isSearchable) {
       dispatch({ type: 'setPromises', payload: { [inputValue]: true } });
 
       loadOptions(inputValue)
@@ -133,6 +143,7 @@ const Select = ({
         'has-error': invalid
       })}
       {...props}
+      isDisabled={props.isDisabled || props.isReadOnly}
       options={state.options}
       classNamePrefix={classNamePrefix}
       isMulti={isMulti}
@@ -157,6 +168,7 @@ Select.propTypes = {
   pluckSingleValue: PropTypes.bool,
   value: PropTypes.any,
   placeholder: PropTypes.string,
+  loadOptionsChangeCounter: PropTypes.number,
   ...input
 };
 

packages/pf3-component-mapper/demo/demo-schemas/sandbox.js

@@ -1,6 +1,27 @@
 /* eslint-disable camelcase */
 import { componentTypes as components, validatorTypes as validators } from '@data-driven-forms/react-form-renderer';
 
+const asyncOptions = [
+  { label: 'async-option-1', value: 'async-option-1' },
+  { label: 'async-option-2', value: 'async-option-2' },
+  { label: 'async-option-3', value: 'async-option-3' },
+  { label: 'async option pepa 1', value: 'async-option-4' },
+  { label: 'async option pepa 2', value: 'async-option-5' }
+];
+
+const baseOptions = asyncOptions.slice(0, 3);
+
+const asyncLoadOptions = (searchValue) =>
+  new Promise((resolve) =>
+    setTimeout(() => {
+      if (searchValue && searchValue.trim() !== '') {
+        return resolve(asyncOptions.filter(({ label }) => label.toLocaleLowerCase().includes(searchValue.trim().toLocaleLowerCase())));
+      }
+
+      return resolve(baseOptions);
+    }, 2000)
+  );
+
 const output = {
   title: 'Testing dialog',
   description: 'Description of testing Dialog',
@@ -39,18 +60,8 @@ const output = {
               name: 'select-1',
               label: 'Dropdown 1',
               visible: true,
-              dataType: 'number',
-              options: [
-                {
-                  value: 1,
-                  label: 'foo'
-                },
-                {
-                  value: 2,
-                  label: 'bar'
-                }
-              ],
-              isMulti: true
+              loadOptions: asyncLoadOptions,
+              isSearchable: true
             },
             {
               title: 'Text boxes',