How to get selected value from Forge UI Kit Select?

I am developing a custom field with Forge.

I am using UI Kit Select

How can I get the current selected value in this list without submitting the form?

I will populate another select list based on first select, that is why I do not want to submit yet.

import ForgeUI, { 
    render,
    UserPicker,
    useProductContext,
    CustomField,
    CustomFieldEdit, 
    Text,
    useAction,
    Button,
    Form,
    TextField,
    CheckboxGroup,
    Checkbox,
    formState,
    Option,
    Select,
    StatusLozenge,
    Fragment,
    useState,
    useEffect
} from "@forge/ui";

import api from "@forge/api";

import issueOperations from './operations';

const View = () => {
    const getLozengeApperance = (riskLevel) => {
        switch (riskLevel) {
            case 'low':
                return 'success';
            case 'medium':
                return 'inprogress';
            case 'high':
                return 'removed';
            default:
                return 'default'
        }
    }

    const {
        extensionContext: { fieldValue },
    } = useProductContext();

    return (
        <CustomField>
            <Text>
                <StatusLozenge text={fieldValue || 'None'} appearance={getLozengeApperance(fieldValue)} />
            </Text>
        </CustomField>
    );
};

const Edit = () => {

    const [issueData] = useAction(value => value, async () => {
        return await issueOperations.getIssueData()
    });
    
    const onSubmit = (formValue) => {
        return issueData.key
    }

    const [count, setCount] = useState(0);
    const [counter, setCounter] = useState(0);
    const [forSelect, setForSelect] = useState(0);
 
    const sendLog = async () => Promise.resolve('send!');

    const LogData = ({ counter }) => {
        const [logSend, setLogSend] = useState();
      
        useEffect(async () => {
          await sendLog();
      
          setLogSend(Date.now());
        }, [counter]);
      
        return <Text>Last log: {logSend}</Text>;
    };
    
    const SelectData = ({ forSelect }) => {
        const [logSend, setLogSend] = useState();
        const [userOptions, setUserOptions] = useState([ { value: 'USA2', name: 'USA2' }, { value: 'CANADA', name: 'CANADA' } ]);

        useEffect(async () =>{
            const response = await api.asApp().requestJira('/rest/api/3/users', {
                headers: {
                    'Accept': 'application/json'
                }
            });
              
            
            let userList = await response.json();
            
            Object.keys(userList).forEach(function(key) {
                userOptions.push({
                    value: userList[key].displayName,
                    name : userList[key].displayName
                });
              });
            
              console.error("After" + JSON.stringify(userOptions))

            await sendLog();
/*             if (forSelect > 1) {

            } */

            setLogSend(Date.now());
          }, [forSelect]);

        return <Select label="user List" name="userlist" isRequired>
                    {userOptions.map((e, key) => {
                        return <Option label={e.name} value={e.value}/>;
                    })}
                </Select>;
      };
          
    return (
        <CustomFieldEdit onSubmit={onSubmit} header="Select risk3" width="medium"  >
            <Fragment>
                
                <Button
                 text={`Count is ${count}`}
                    onClick={() => {

/*                         I WANT TO GET CURRENT Select VALUE HERE
 */
                    
                    }
                    }
                />  

                <SelectData forSelect={counter} />
                
            </Fragment>
        </CustomFieldEdit>
    );
};

export const renderFieldView = render(<View />);
export const renderFieldEdit = render(<Edit />);```

Hi @MertTurkoglu,

In order to build forms dynamically, you should be able to use UI Kit Form Conditions.

I know about form conditions but they do not allow me get current value of select list without submitting the form element. They just enable access to elements value for a condition but there is no way to use first elements value before submitting form in my case.

I want the get the values of form without submitting and closing the cf edit modal.

Hey @MertTurkoglu did you ever figure out a solution to this? I have the same issue I am trying to solve.

Hi,
i have the same issue in my MacroConfig:
2 SelectBoxes, where the second one should be filled up depending of the selected value from the first Selectbox.
How can be fixed this issue

1 Like