Skip to content

FormTokenField: Issues with multiple identical strings #62533

@Luehrsen

Description

@Luehrsen

Description

The FormTokenField component encounters issues when handling multiple tokens with identical string values. Specifically, when two or more items have the same name or title, the component fails to manage them correctly. This reliance on string matching without unique identifiers causes a React error and prevents selection of the duplicate items.

Expected Behavior:

  • The FormTokenField should allow selection and management of multiple tokens, even if they share the same name or title, without any errors.

Current Behavior:

  • When the FormTokenField encounters multiple items with the same name or title, a React/JavaScript error ‘Warning: Encountered two children with the same key’ is thrown.
  • The second (and any subsequent) item with the identical title becomes unselectable.

P.S.: I am aware that the FormTokenField is currently being rewritten. However, I believe it is important to report this issue regardless.

Step-by-step reproduction instructions

  1. Create a post tag called 'Identical Name'.

    • Navigate to the "Tags" section in the WordPress admin dashboard.
    • Add a new tag with the name 'Identical Name'.
  2. Create a second post tag called 'Identical Name2'.

    • In the same "Tags" section, add another tag with the name 'Identical Name2'.
    • Note: Creation of a tag with an existing name (e.g., 'Identical Name') is blocked by WordPress.
  3. Edit the second post tag to be 'Identical Name'.

    • Find the tag 'Identical Name2' in the list of tags.
    • Edit the tag and change its name to 'Identical Name'.
    • Note: The check on existing names is not active on editing tags.
  4. Create a new post.

    • Navigate to "Posts" in the WordPress admin dashboard.
    • Click "Add New" to create a new post.
  5. Edit post tags.

    • In the block editor, locate the tags input field.
  6. Type 'Identical Name' in the FormTokenField.

    • Begin typing 'Identical Name' in the tags input field.
    • Observe the behavior of the FormTokenField as it attempts to handle the duplicate tags.

Screenshots, screen recording, code snippet

No response

Environment info

  • WordPress 6.6-beta2-58392-src

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

Metadata

Metadata

Assignees

No one assigned

    Labels

    [Package] Components/packages/components[Type] BugAn existing feature does not function as intended

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions