Reporting: Transactions report - Fix view for Search tags input field when we have too many search items

[nagpai]

Describe the bug

The input field of the search bar on Transactions report page, gets hidden if we add too many tags. This becomes more obvious in narrow / mobile screens.

This issue will become more prominent when the Payment Activity Card is released to merchants (estimated v7.9). From this card, the TPV View report link will show all of these filter tags:

charge, payment, payment_failure_refund, payment_refund, refund, refund_failure, dispute, dispute_reversal, card_reader_fee

To Reproduce

• Browse to Payments > Transactions on your test site.
• Try adding a tag or two and see that the input field for the next tag and its prompt are correctly visible

• In the search field, add a lot of tags till it warps to a new line, or to the end of the line ( it will then warp if you narrow the screen size ). Tip, You can click on the View report link on the Payment activity widget. It will open with a lot of tags preloaded.

• We notice that the input field and the search prompt to add the next tag no longer appears.

• With the search box clicked, we are still able to type in tags, but it can be confusing to merchants without the prompt that they can type more. They also do not see where they are typing.

Solution from Design ( props @rogermattic 🙌 )

Within the current design setup, we could try this:

1. Increase the height of the search box
2. Have all the tags in one line. Some of them will get clipped , that's fine. We can have a horizontal scroll
3. Have the x cross sign for the user to clear the filters visible
4. Have the next (2nd) line empty so that the user can search if they want. We can show the prompt here.

Additional context

• The issue came up while Reporting: Fix the View report link URL on Total payment volume tile, within Payment activity widget #8726 (comment) related to Payment activity widget.

[Jinksi]

I just discovered a very relevant WC issue for this exact problem in the woocommerce repo:

Improving the WooCommerce Admin search component · Issue #32239 · woocommerce/woocommerce

And WooPayments issue #2269.

This may be a duplicate!

[haszari]

Marking as low priority for now – I am assuming most merchants would not experience this (use a limited number of filter tokens). If we get more reports we should raise priority.

As we work more on list views / reporting features, we could revisit this as part of a project.

[Jinksi]

I am assuming most merchants would not experience this

@haszari This is true for now, until the Payment Activity Card is released to merchants. From this card, the TPV View report link will show all of these filter tags:

charge, payment, payment_failure_refund, payment_refund, refund, refund_failure, dispute, dispute_reversal, card_reader_fee

I'll add this detail to the issue description.

[haszari]

Thanks, that's useful info.

charge, payment, payment_failure_refund, payment_refund, refund, refund_failure, dispute, dispute_reversal, card_reader_fee

That's a large / complex query to land on when clicking a tile. Might be worth design consideration - keen for thoughts from @rogermattic . i.e. the bug is not that the search field doesn't work well with lots of items, the bug is that we have to use a detailed query for an innocuous link.

Of course we should fix the bug with the field too (might as well do that as part of project?), but we should consider the wider experience also.

[haszari]

@Jinksi I'm going to increase the priority and add this to project – let me know what you think. Feels like we need to resolve for project.