UserPicker component does not work when it's child of CustomFieldEdit

Jira Development Jira Cloud
,
4

Thanks for getting back to me @belokurbohdan I just had another look at the problem (fresh eyes in the morning) and I went to check what dependencies the package has. There they specify a particular version of the intl package and after including that I got it to run. So my whole solution looks like this.

in package.json in dependencies I added "react-intl-next": "npm:react-intl@^5.18.1", and did npm install

and my react typescript code looks like this (note you need to provide at least a fieldId into the UserPicker component):

import React from 'react';
import RawUserPicker, {OptionData} from '@atlaskit/user-picker'
import { IntlProvider } from "react-intl-next";

export default function UserPicker(props: any) {
  return (
    <IntlProvider locale="en">
      <div>
        <RawUserPicker {...props} loadOptions={loadUsers} />
      </div>
    </IntlProvider>
  );
}
  
  async function loadUsers(searchText?: string): Promise<OptionData[]> {
    return JiraApi(`/rest/api/3/user/picker?showAvatar=true&query=${searchText}`).then((response:any) =>
      (response.body as UserPickerSearchResponse).users.map((user) => ({
        id: user.accountId,
        ...user,
      }))
    );
  }
  
  interface UserPickerSearchResponse {
    users: User[];
    total: number;
    header: string;
  }
  
  interface User {
    accountId: string;
    accountType: string;
    name: string;
    key: string;
    html: string;
    displayName: string;
    avatarUrl: string;
  }

Adjust the code and your JiraApi function to either AP.request or api.asUser().requestJira depending on what platform you are on and change the data retrieval accordingly! But this worked for me

2 Likes