Dropdown (select) widget with asyncFetch cant select and keep any value from dropdown

[silviu-ion]

When I select any value from dropdown with asyncFetch and click outside of the dropdown the value set to empty :(
Can someone tell me how can i solve that?

config i used.

`import _ from "lodash";
import MaterialConfig from 'react-awesome-query-builder/lib/config/material';

import authHeader from "../../../service-api/auth-header";
import axios from "../../../utils/axios";

const InitialConfig = MaterialConfig;

const config = {
...InitialConfig,
settings: {
...InitialConfig.settings,
showLabels: true,
excludeOperators: {
text: ['proximity'],
},
showNot: false,
maxNesting: 2,
},
fields: {
orders: {
type: '!struct',
label: 'Orders',
subfields: {
total: {
type: 'number',
preferWidgets: ["number"],
label: 'Total',
fieldSettings: {
validateValue: (val, fieldSettings) => {
return (val < 0);
},
},
},
subtotal_total: {
type: 'number',
preferWidgets: ["number"],
label: 'Sub total',
},
discount: {
type: 'number',
preferWidgets: ["number"],
label: 'Discount',
},
taxes: {
type: 'number',
preferWidgets: ["number"],
label: 'Taxes',
},
shipping: {
type: 'number',
preferWidgets: ["number"],
label: 'Shipping',
},
payment_method: {
type: 'text',
label: 'Payment Method',
excludeOperators: ["proximity"],
},
currency: {
type: 'text',
label: 'Currency',
excludeOperators: ["proximity"],
},
user_email: {
type: 'text',
label: 'User Email',
excludeOperators: ["proximity"],
}
}
},
customers: {
type: '!struct',
label: 'Customers',
subfields: {
first_name: {
type: 'text',
label: 'First Name',
excludeOperators: ["proximity"],
},
last_name: {
type: 'text',
label: 'Last Name',
excludeOperators: ["proximity"],
},
email: {
type: 'text',
label: 'Email',
excludeOperators: ["proximity"],
},
country: {
type: 'text',
label: 'Country',
excludeOperators: ["proximity"],
},
city: {
type: 'text',
label: 'City',
excludeOperators: ["proximity"],
},
state: {
type: 'text',
label: 'State',
excludeOperators: ["proximity"],
},
postcode: {
type: 'text',
label: 'Postcode',
excludeOperators: ["proximity"],
},
date_registered: {
type: 'datetime',
label: 'Date Registered',
},
date_last_active: {
type: 'datetime',
label: 'Date Last Active',
},
gender: {
type: 'text',
label: 'Gender',
excludeOperators: ["proximity"],
},
geolocation: {
type: 'text',
label: 'Geolocation',
excludeOperators: ["proximity"],
},
birthday: {
type: 'date',
label: 'Birthday',
}
}
},
products: {
type: '!struct',
label: 'Products',
subfields: {
title: {
type: 'select',
label: 'Name',
fieldSettings: {
asyncFetch: async (search, offset) => {
const toSearch = _.isEmpty(search) ? 'null' : search;
const prodApi = (await axios.get(http://localhost:8002/api/products/1/${toSearch}?offset=${offset}, { headers: authHeader() }));
const productsValues = prodApi.data.data.map(
product => ({
title: product.title,
value: product.id
})
)

          return {
            values: productsValues,
            hasMore: true,
          }
        },
        useAsyncSearch: true,
        useLoadMore: true,
        forceAsyncSearch: false,
        allowCustomValues: false
      }
    },
    price: {
      type: 'number',
      preferWidgets: ["number"],
      label: 'Price',
      fieldSettings: {
        preferWidgets: ['number']
      }
    }
  }
}

}
};

export default config;
`

[ukrbublik]

Can you please provide more info so I can reproduce your problem?
Eg. can you dump results you get in productsValues?
Video recording would be helpful, as well as dump of XHRs you get during issue reproducing.
If you can give access to your API server for demo purposes, it would be great

[Delaramv]

hi can you add asyncFetch to the !group type as well? or how can I handle this situation?
in my case I have 3 fields. when I select the the first Filed, it should fetch data based on the field 1 and populated the second field. when I select the second field then it should fetch data based on the first and second filed and populate the last filed.
for the second and third I can do that since it's a select. but for the first one since it's !group type I can't.

The other question is if I use asyncfetch

async (search, offset) => { const prodApi = (await getAll(s)); const productsValues = prodApi.map( product => ({ title: product.name, value: product.id }) ) return { values: productsValues, hasMore: false, } }

the type of each one should be different
for example the result of the api would be [{id:..,name:,.., type:opentext},{id:..,name:,.., type:date}]
how can I handle that?

Thanks

[silviu-ion]

I solved the problem, it's about the value of object option for selector , there need to be string value and i have an int value :) thanks

…

On Mon, Oct 18, 2021 at 12:36 AM Denis Oblogin ***@***.***> wrote: Can you please provide more info so I can reproduce your problem? Eg. can you dump results you get in productsValues? Video recording would be helpful, as well as dump of XHRs you get during issue reproducing. If you can give access to your API server for demo purposes, it would be great — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#515 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ATQCEGWS4BVBRVL4HEWLAQDUHM6VTANCNFSM5FW5WG4Q> .

[mihailShumilov]

I also have an problem with asyncFetch
please correct me

 fieldConfig.fieldSettings = {
            // listValues: listValues Data,
            asyncFetch: async (search, offset) => {
              console.log('asyncFetch: ', { search, offset });

              return {
                values: [{ title: 'blabla', value: '1111' }],
                hasMore: true,
              };
            },
            useAsyncSearch: true,
            useLoadMore: true,
            forceAsyncSearch: false,
            allowCustomValues: false,
          };
          fieldConfig.type = 'select';

but in interface dropdown with items - always empty

• I don't see in console log items... it looks like fetch not called at all

[denysoblohin-okta]

Do you use Material UI, right?