Visual and Search Issues with Tag Fiel

[oidacra]

Parent Issue

No response

Problem Statement

There are two issues with the Tag Field component:

1. Visual Overflow: When many tags are selected, they visually overflow the input field, creating a poor user experience.
2. Search Loading Indicator: Occasionally, the loading indicator persists even after the search operation has completed.

These issues impact the usability and visual consistency of the Tag Field component, affecting users who work with multiple tags or frequently use the search functionality.

Steps to Reproduce

1. Visual Overflow:

   • Open a content type (Like Blog) and find the tag field
   • Observe that the tags visually overflow the boundaries of the input

2. Search Loading Indicator:

   • Open a content type (Like Blog) and find the tag field
   • Initiate a search for tags
   • Observe that sometimes the loading indicator continues to display even after results are shown or when no results are found

Acceptance Criteria

1. Tags should be contained within the visual boundaries of the Tag Field input, possibly by wrapping to multiple lines or implementing a scrollable area within the input.
2. The search loading indicator should accurately reflect the state of the search operation, disappearing promptly when the search is complete or when no results are found.

dotCMS Version

master

Proposed Objective

User Experience

Proposed Priority

Priority 4 - Trivial

External Links... Slack Conversations, Support Tickets, Figma Designs, etc.

Assumptions & Initiation Needs

No response

Quality Assurance Notes & Workarounds

No response

Sub-Tasks & Estimates

No response