How can I set default value as the last selected at my Select, in custom field configure context

Hi,

Currently, I’m developing a custom field type forge app.
I have selects at my configure custom field page.
The problem is when I select an item at Select and press save button, I can’t see what did I select at my next time visiting configure custom field page.

My code:

import ForgeUI, {useProductContext, CustomFieldContextConfig, TextField, Select, Option} from "@forge/ui";

export const ContextConfig = () => {
  const {extensionContext: {configuration = {}}} = useProductContext();
  const onSubmit = (formData) => ({ configuration: { cfDate1: formData.cfDate1 } });

  return (
    <CustomFieldContextConfig onSubmit={onSubmit}>
      <Select label="Select the first Date Custom Field" name="cfDate1" defaultValue={{label: configuration.cfDate1, value: 1}}>
        <Option label='0' value='0' />
        <Option label='1' value='1' />
      </Select>
    </CustomFieldContextConfig>
  );
};

My configure custom field page seems always same like this:
Screen Shot 2021-12-17 at 16.07.38

Waiting for a help from this experienced community.
Thanks already.
Mert

Hey @AliMert,

You need to use the defaultSelected property of the Option component. See https://developer.atlassian.com/platform/forge/ui-kit-components/form/#option.

2 Likes

Hey @kkercz,

I saw the documentation about Option.
But in my Select, my last selected value may change.
So, I can’t assign a single option as a defaultSelected.

Here is my code to explain myself better:

//Submit data when onSubmit triggered
  const onSubmit = (formData) => (
      { configuration: { cfDate1: formData.cfDate1, cfDate2: formData.cfDate2 } });

    const selects = [];
    //Filtering Custom Field types to 'date' and 'datetime'
    for (var i=0 ; i<=ids.length ; i++){
        try{
            if (ids[i].custom==true &&  (ids[i].schema.type == "date" || ids[i].schema.type == "datetime")){
                selects.push(<Option label={ids[i].name} value={ids[i].id} />);
            };
        } catch (TypeError){}}
    return (
    <CustomFieldContextConfig onSubmit={onSubmit}>
        <Select label="Select the first Date Custom Field" name="cfDate1" >
              {selects}
        </Select>
        <Select label="Select the second Date Custom Field" name="cfDate2" >
            {selects}
        </Select>
    </CustomFieldContextConfig>
  );

This is my Custom Field Context Config page.