Is it possible to change or reset UserPicker dynamically?

Hi,

I have a form with a user picker (UI Kit 2, forge/react 10). And a reset button to clear all fields. It works well with Textfield using value and defaultValue, but not with UserPicker because there is no “value” prop.

Do you know if it is possible?

Thanks for your help!

https://developer.atlassian.com/platform/forge/ui-kit/components/user-picker/
https://developer.atlassian.com/platform/forge/ui-kit/components/textfield/

Here is the code I use to test:

import React, { useState } from 'react';
import ForgeReconciler, { Text, UserPicker, Textfield, Button } from '@forge/react';

const App = () => {
  const [txt, setTxt] = useState('');
  const [user, setUser] = useState('');
  const reset = () => {
    setTxt('');
    setUser('');
  };

  return (
    <>
      <Text>UserPicker: {user}</Text>
      <Text>Textfield: {txt}</Text>
      <UserPicker
        id="user"
        name="user"
        value={user}
        defaultValue={user}
        onChange={ (user) => {
          if (user?.id) {
            setUser(user.id);
          } else {
            setUser('')} ;
          }
        }
      />
      <Textfield
        id="txt"
        name="txt"
        value={txt}
        onChange={ (e) => setTxt(e.target.value) }
      />
      <Button onClick={reset}>Reset</Button>
    </>
  );
};

ForgeReconciler.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

I can’t make the defaultValue prop work for UserPicker. Anyone from Atlassian could confirm that all of this is a known bug? So that I can spend my time on another (added-value) battle?

1 Like

I have encountered the same issue and am still struggling with it…