[4.x]: Match Condition Input: Item Removal Fails and Scrolls When List Contains Many Items #18079
Description
What happened?
Description
There is a UI issue with CraftCMS default match condition input component, and it also occurs in Craft Commerce promotion discount match conditions.
When the match input contains a large number of selected items (e.g., 50+ items), removing an item using the “X” (remove) icon does not work correctly.
Behavior observed:
- Clicking the “X” sometimes causes the list to auto-scroll or “bounce” downward.
- The item is not removed on the first click.
- The item is only removed after scrolling back up and clicking the “X” a second time, and only if the input field is currently focused.
- Clicking outside the field removes focus and makes the bug reappear.
This severely affects usability when working with long match-condition lists.
Steps to reproduce
- Open any area that uses the match condition input
(e.g., Craft → Fields → Match Condition, or Commerce → Promotions → Discounts → Match Conditions). - Add many items to the match input — 50 or more.
- Scroll to a specific item and click its “X” remove icon.
- The page scrolls/jumps downward and the item is not removed.
- Scroll back up and click the “X” again → the item is removed.
- Click outside the input to remove focus.
- Try removing an item again → the same issue occurs.
Expected behavior
- The item should be removed immediately when clicking the “X”.
- The UI should not scroll or bounce unexpectedly.
- Removal should not depend on input focus.
Actual behavior
- Clicking “X” causes auto-scrolling and fails to remove the item.
- Item only removes on the second click when the input is focused.
Screen.Recording.-.Macth.condition.input.problem.mp4
Craft CMS version
Craft Pro 4.16.16
PHP version
8.0.30
Operating system and version
No response
Database type and version
No response
Image driver and version
No response
Installed plugins and versions
- Craft Commerce: 4.10.0