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

Jira Development Jira Cloud
,
1

Hi!
Here’s my Edit view for the UserPicker custom field

return (
    <CustomFieldEdit onSubmit={onSubmit} width="small" header="Select values">
      <Fragment>
        <UserPicker label="User" name="user" />
      </Fragment>
    </CustomFieldEdit>
  );

When I open issue’s Create Screen and click on the field nothing happens and there’s one error in the browser logs:

Invariant Violation: [React Intl] Could not find required `intl` object. <IntlProvider> needs to exist in the component ancestry.
    at e.exports (https://jira-frontend-static.prod.public.atl-paas.net/assets-brotli/vendor~253ae210.9da134af4ea7c6ef7fd0.8.js:155:28)
    at ee (https://jira-frontend-static.prod.public.atl-paas.net/assets-brotli/vendor~fd731fb0.0fe30d75c3fcc69c1a1f.8.js:138:169)
    at new n (https://jira-frontend-static.prod.public.atl-paas.net/assets-brotli/vendor~fd731fb0.0fe30d75c3fcc69c1a1f.8.js:139:248)
    at Ra (https://jira-frontend-static.prod.public.atl-paas.net/assets-brotli/vendor~fd731fb0.0fe30d75c3fcc69c1a1f.8.js:62:470)
    at qi (https://jira-frontend-static.prod.public.atl-paas.net/assets-brotli/vendor~fd731fb0.0fe30d75c3fcc69c1a1f.8.js:80:221)
    at Rl (https://jira-frontend-static.prod.public.atl-paas.net/assets-brotli/vendor~fd731fb0.0fe30d75c3fcc69c1a1f.8.js:119:595)
    at ys (https://jira-frontend-static.prod.public.atl-paas.net/assets-brotli/vendor~fd731fb0.0fe30d75c3fcc69c1a1f.8.js:110:937)
    at hs (https://jira-frontend-static.prod.public.atl-paas.net/assets-brotli/vendor~fd731fb0.0fe30d75c3fcc69c1a1f.8.js:110:862)
    at ls (https://jira-frontend-static.prod.public.atl-paas.net/assets-brotli/vendor~fd731fb0.0fe30d75c3fcc69c1a1f.8.js:107:693)
    at https://jira-frontend-static.prod.public.atl-paas.net/assets-brotli/vendor~fd731fb0.0fe30d75c3fcc69c1a1f.8.js:58:78

When I remove UserPicker component from the my code, edit field view renders correctly.

2

Facing the same issue at the moment. I figured that I need to include further up the tree as it is done in the UserPicker example here but unfortunately that did not make a difference for me. Did you find a solution to your problem?

3

Unfortunately, I’ve not found solution

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
5

Hi @MichaelIlewicz
Thank you a lot for your response. :slightly_smiling_face:

Few month later I used this approach for making a userpicker

 - key: user-example-cf
      name: user example customfield type
      type: user
      validation:
        expression: value != null
        errorMessage: Please, select user

This wasn’t documented feature, but now it’s officially released (see Extend Forge Custom Field Type types )