Merge pull request #662 from data-driven-forms/pf4-select-loading

fix(pf4): prevent select filter trigger on value selection

Author: rvsia

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

@@ -36,8 +36,29 @@ const loadOptions = (inputValue = '') => {
   );
 };
 
+const loadOptionsLong = (inputValue = '') => {
+  const options = [...Array(99)].map((_v, index) => ({ label: `${index}`, value: `${index}` }));
+  return new Promise((res) =>
+    setTimeout(() => {
+      if (inputValue.length === 0) {
+        return res(options.slice(0, 80));
+      }
+
+      return res(options.filter(({ label }) => label.toLocaleLowerCase().includes(inputValue.toLocaleLowerCase())));
+    }, 1500)
+  );
+};
+
 const selectSchema = {
   fields: [
+    {
+      component: componentTypes.SELECT,
+      name: 'long-searchable-async-select',
+      label: 'Long searchable async select',
+      loadOptions: loadOptionsLong,
+      isSearchable: true,
+      menuIsPortal: true
+    },
     {
       component: componentTypes.SELECT,
       name: 'simple-portal-select',
@@ -165,5 +186,6 @@ const selectSchema = {
 };
 
 export default {
-  ...selectSchema
+  ...selectSchema,
+  fields: [selectSchema.fields[0]]
 };

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

@@ -163,8 +163,11 @@ const InternalSelect = ({
       itemToString={(value) => itemToString(value, isMulti, showMore, handleShowMore, handleChange)}
       selectedItem={value || ''}
       stateReducer={(state, changes) => stateReducer(state, changes, isMulti)}
-      onInputValueChange={(inputValue) => {
-        if (onInputChange && typeof inputValue === 'string') {
+      onInputValueChange={(inputValue, { selectedItem }) => {
+        /**
+         * Prevent firing te load options callback when selecting value not filtering
+         */
+        if (onInputChange && typeof inputValue === 'string' && selectedItem?.label !== inputValue) {
           onInputChange(inputValue);
         }
       }}