Tree

Lazy loaded options allow users to search and select options from a list without the need to load all the options at once. This can be especially useful for forms with a large number of options or for options that are constantly changing. In this post, we will cover the simples approach for implementing async options in your forms, including using AJAX requests and APIs. We will simplify from previous blog post and add initialValues to make it possible to use this form, as an edit form.

Let`s assume a situation like this. You are a moderator on a social media app. You got the report that users with the nickname "Legend27" and "Bob123" do not behave well in the comment section. You just collected all suspicious comments, but the manager told you that "Legend27" is specially treated and can not get account suspension. To handle this situation you should unselect the "Legend27" value from the "users" input, and the application should clean up only values related to the unselected user, but the rest of the comments leave without modification.

Periodically few inputs are related to each other, and options values inside depend on the previous option from another select input. We could define all possible outcomes and filter out records, but this could be inefficient. Another issue is that we could not add/remove options till the new production update. To resolve this issue we can send a request for options values for the specific select input.