Here is my code for Project Picker using Custom UI.
// eslint-disable-next-line no-use-before-define
import React, { useState, useEffect } from 'react';
import { Field, HelperMessage } from '@atlaskit/form';
import { requestJira } from '@forge/bridge';
import { AsyncSelect } from '@atlaskit/select';
import { IProjectOption } from '../../../../forge/src/models/Jira';
import { getProjectOptions } from '../services/user-service';
interface IProps {
fieldKey: string
required: boolean
label: string
defaultValue: IProjectOption | undefined
value: IProjectOption | undefined
isDisabled: boolean
handleChange: (param: string, value: any) => void;
}
export default function ProjectsList(props: IProps) {
const {
fieldKey, required, label, defaultValue, value, isDisabled, handleChange,
} = props;
console.log('Current Value>>>', value);
const formatLabel = (project: IProjectOption) => (
<div
style={{
display: 'flex',
alignItems: 'center',
}}
>
<img
width={16}
height={16}
alt={project.label.name}
src={project.label.avatarUrls['24x24']}
/>
<span
style={{ marginLeft: 5 }}
id="project-span"
>
{project.label.name}
(
{project.label.key}
)
</span>
</div>
);
// const valueChange = (val) => {
// console.log('handleChange>>>>>', val);
// handleChange(fieldKey, val);
// };
const valueChange = (val) => {
const selectedValue = val || null; // Use null to clear the selection
console.log('handleChange>>>>>', selectedValue);
handleChange(fieldKey, selectedValue);
};
return (
<div>
<Field
key={fieldKey}
label={label}
name={fieldKey}
id={fieldKey}
// defaultValue={defaultValue}
isDisabled={isDisabled}
isRequired={required}
>
{({ fieldProps: { id, ...rest } }) => (
/* @ts-ignore */
<AsyncSelect
{...rest}
loadOptions={getProjectOptions}
formatOptionLabel={formatLabel}
inputId={id}
onChange={(selectedValue) => valueChange(selectedValue)}
cacheOptions={false}
value={value}
defaultValue={undefined}
required={required}
menuPosition="fixed"
menuContainerStyle={{ zIndex: 9999 }}
defaultOptions
isClearable
/>
)}
</Field>
<HelperMessage>This is helper message</HelperMessage>
</div>
);
}
How do I force reload the component? Even though I pass undefined as value, the old option which I previously selected still shows. I tried cacheOptions={false}, but that doesn’t seem to work. Only when I click on the clear options icon, it gets cleared.
Has anyone found a solution for this?