Dynamic Options for select based on other form field

[salujaharkirat]

Scope: Form Renderer

Description

I have a case in which I need to change select options for an input called relationship based on a gender field. For example, in the case where gender is male the options for relationships should change.

Can someone please help me? TIA

[rvsia]

@jinxac

You have multiple options:

1. Use conditions to have two select fields with different options and show them according to gender field. (I would probably do this.)
2. Use custom component with FormSpy.
3. Use resolveProps. You can get other values using formApi.getState().values.

[salujaharkirat]

@rvsia first option is much neat I feel.

Thank you for such prompt and helpful replies over the last few days. It has been a really great help for me :)

[rvsia]

@jinxac No problem! That's the reason why we are here! :)

[salujaharkirat]

@rvsia I was trying out the third scenario(resolveProps) mentioned above. I need to change options based on input text update in some another field. Here it just takes the first change and then nothing. Is there anything I am missing here?

[salujaharkirat]

@rvsia so my requirement here is as follows:-

1. I enter Pincode in the input field.
2. It makes API call onBlur and once API returns data I populate the city and state select options with data from API

I think FormSpy will be a good use case for this. Is there a way I can achieve this?

[rvsia]

@jinxac Yeah, you have probably missed to set-up the subscription prop as it's mentioned in the documentation page. The problem is that other fields are not being refreshed when some other is being changed (due to optimization.) You can setup a subscription={{values: true}} on FormRenderer so each field change will trigger rendering of all form components, however, it could lead to performance issues.

If you encounter this issue, you can use FormSpy component to just wrap the select you need:

import Select from '@data-driven-forms/mui-component-mapper/dist/cjs/select'

const EnhancedSelect = (props) => <FomSpy>{() => <Select {...props} />}</FormSpy>

[salujaharkirat]

@rvsia The way I was thinking to handle Pincode logic is to do the following:-

1. Create a custom component with 3 fields Pincode, city, and state.
2. Add logic for API in this component and once data is fetched populate options from here only.

Is this a clean way to do it or is there any other way I can achieve this? My concern here is still how to change options on the fly. I cannot hardcode the options in schema this way as they are coming from the API

[rvsia]

@jinxac You could use loadOptions for the current select component. This props accepts an async function returning options, even if you change the function in runtime. Not sure how well it would behave in your case, but it should do the trick.

[salujaharkirat]

Interesting, I will explore it once.

In the meantime, I was thinking if I do the following I might be able to solve this:-

1. Create a custom PinCode component with FormSpy and make the API call inside this component.
2. I write data for city and state into a dummy key as an array.
3. I create 2 components for city and state with FormSpy again and return select components here with default options(which initially will be empty). I read values using the dummy key I created above and update the options.

I think this should work fine, right ?

[rvsia]

@jinxac Sounds good!

[salujaharkirat]

@rvsia I have made a demo at https://codesandbox.io/s/priceless-booth-7htyr in case someone encounters on the same issue.

[Hyperkid123]

I was thinking about adding a section with custom components examples to the docs. @rvsia do you have a couple of minutes to prepare the new docs section? @jinax could then add his example to it.

[rvsia]

@jinxac Awesome! Thanks.

@Hyperkid123 I was thinking about the same thing! But right now I don't have much spare time as I am mentally preparing to update tests for 50 changed files in Sources. We can do it next week.

[salujaharkirat]

@rvsia Sure can you drop a comment here whenever we are ready?. I can add my examples post that.

[Hyperkid123]

All right. I might have a few minutes after lunch.

@jinxac we will let you know.

[Hyperkid123]

@jinxac the example section is ready. You can follow this guide to add yours: https://data-driven-forms.org/development-setup#addingformcomponentexample

There is also a sample example page already added. Feel free to override it if you want. The development setup should give you all the information you need to setup local development.

We required node v10 in order to run, build, and deploy the docs (hosting limitation) so make sure you have the correct version. You can use nvm to install and switch between node versions.

[salujaharkirat]

@Hyperkid123 looking into it. Will do it asap

[salujaharkirat]

@rvsia @Hyperkid123 I had integrated the above with a few of my forms and it works fine until FieldArray came into the picture :D.

While using SpyProps, Now the problem here is that the name of the prop which comes for field array is nested. For example, in my case, it comes as nominees[0].city. The form values object(from spy props) returns me an object as values -> nominees -> [0] -> city. .

In the case of render props for fieldArray field, how do I access the indexes for a particular row?

I have created mappers to handle such scenarios using a splitting algorithm based on [. But this looks like really hackish.

Is there a better way to do it?

[salujaharkirat]

@rvsia @Hyperkid123 can someone please help me :) ?

[Hyperkid123]

@jinxac sorry your comment slipped through my notifications. I will try to look at your issue later today.

[Hyperkid123]

@jinxac I do apologize I was not able to get to this yesterday :( . Could you post us a code sample from your solution? I think that using the name is the right way to go. It will always give you the correct information.

[rvsia]

Yeah, I also think that splitting the name is the only way how to do it.