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

            Dave made changes -
            Status Original: Needs Triage [ 10030 ] New: Gathering Impact [ 12072 ]
            Nashid Farhad made changes -
            Labels New: ecohelp
            Peter Yu made changes -
            Remote Link Original: This issue links to "EXT-1504 (Jira)" [ 831719 ]
            Peter Yu made changes -
            Remote Link New: This issue links to "EXT-1504 (Jira)" [ 831719 ]
            Nashid Farhad made changes -
            Description Original: h3. 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.

            h3. Steps to Reproduce
            # Create a UI Kit 2 project template;
            # Include a [user picker|https://developer.atlassian.com/platform/forge/ui-kit-2/user-picker/] component inside a [Form|] component
            # Deploy
            # open the app and wait for 5-10 seconds without interaction

            *Sample code to reproduce the issue*
            {code:js}
            // 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>
            );

            {code}


            h3. Expected Results
            Without interaction, the cursor should remain wherever the user chooses.

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



            h3. Workaround
            Currently there is no known workaround for this behavior. A workaround will be added here when available             		New: h3. 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.

            h3. Steps to Reproduce
            # Create a UI Kit 2 project template;
            # Include a [user picker|https://developer.atlassian.com/platform/forge/ui-kit-2/user-picker/] component inside a [Form|https://developer.atlassian.com/platform/forge/ui-kit-2/form/] component
            # Deploy
            # open the app and wait for 5-10 seconds without interaction

            *Sample code to reproduce the issue*
            {code:js}
            // 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>
            );

            {code}


            h3. Expected Results
            Without interaction, the cursor should remain wherever the user chooses.

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



            h3. Workaround
            Currently there is no known workaround for this behavior. A workaround will be added here when available
            Nashid Farhad made changes -
            Description Original: h3. 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.

            h3. Steps to Reproduce
            # Create a UI Kit 2 project template;
            # Include a [user picker|https://developer.atlassian.com/platform/forge/ui-kit-2/user-picker/] component inside a [Form|] component
            # Deploy
            # open the app and wait for 5-10 seconds without interaction

            *Sample code to reproduce the issue*
            {code:js}
            // 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>
            );

            {code}


            h3. Expected Results
            Without interaction, the cursor should remain wherever the user chooses.

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



            h3. Workaround
            Currently there is no known workaround for this behavior. A workaround will be added here when available             		New: h3. 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.

            h3. Steps to Reproduce
            # Create a UI Kit 2 project template;
            # Include a [user picker|https://developer.atlassian.com/platform/forge/ui-kit-2/user-picker/] component inside a [Form|] component
            # Deploy
            # open the app and wait for 5-10 seconds without interaction

            *Sample code to reproduce the issue*
            {code:js}
            // 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>
            );

            {code}


            h3. Expected Results
            Without interaction, the cursor should remain wherever the user chooses.

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



            h3. Workaround
            Currently there is no known workaround for this behavior. A workaround will be added here when available
            Nashid Farhad made changes -
            Attachment New: screen-recording-forge-ui-2.mp4 [ 446605 ]
            Nashid Farhad created issue -

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

                Created:
                Updated: