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 />);```