Uploaded image for project: 'Atlassian Ecosystem'
  1. Atlassian Ecosystem
  2. ECO-80

[Forge UI Kit 2] Form component causes pickable fields (User Picker) to be automatically selected

XMLWordPrintable

    • Severity 3 - Minor

      Issue Summary

      When fields (for example <UserPicker>) are used in a <Form> component (UI Kit 2), after some times 5-10 seconds the first field gets automatically selected and in case of a dropdown menu, it gets opened.
      Screen recording is attached that demonstrates this.

      Steps to Reproduce

      1. Create a UI Kit 2 project template;
      2. Include a user picker component inside a Form component
      3. Deploy
      4. open the app and wait for 5-10 seconds without interaction

      Sample code to reproduce the issue

      // using UI Kit 2 > Jira global page template.
// src/frontend/index.jsx
import React, { useEffect, useState } from 'react';
import ForgeReconciler, { Text } from '@forge/react';
import { UserPicker, Form } from '@forge/react';

const App = () => {
  const [formState, setFormData] = useState(undefined);
 
  const onSubmit = (formData) => {
    setFormData(formData);
  }

  return (
    <>
      <Form onSubmit={onSubmit}>
        <UserPicker
          label="User"
          name="user"
          onChange={(user) => console.log(user)}
          />
      </Form>
    </>
  );
};

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

      Expected Results

      Without interaction, the cursor should remain wherever the user chooses.

      Actual Results

      The user picker field is automatically selected and cursor automatically moves to it's text input.

      Workaround

      Currently there is no known workaround for this behavior. A workaround will be added here when available

        1. screen-recording-forge-ui-2.mp4
          5.67 MB

            [ECO-80] [Forge UI Kit 2] Form component causes pickable fields (User Picker) to be automatically selected

            There are no comments yet on this issue.

              Unassigned Unassigned
              2ed764d1efd7 Nashid Farhad
              Affected customers:
              4 This affects my team
              Watchers:
              2 Start watching this issue

                Created:
                Updated: