Checkboxes aren't selected in Prestashop

[tjerry]

Hello

Selecting multiple checkboxes in the Prestashop orders list, doesn't work.

You can quickly check that yourself on https://demo.prestashop.com/#/en/front > Explore Backoffice > Log in > Order > Orders

[remi-garcia]

It is because these are not really "checkbox" but fancy javascript triggered boxes (see screenshot)

IMHO this "bug" is on the website side and solving it would require a dedicated method for that specific website. I tagged the issue "website-bug" but I think it can be closed.

[cpriest]

Thanks for the diagnosis @remi-garcia. There are (and always have been) a number of situations like these.

The re-write took these into account on the engineering side in terms of flexibility. Unfortunately scanning every page for these edge cases can lead to poor performance.

On the other hand, the web has changed from days of standard fields. Depending on how wide-spread this pattern is, perhaps there is something we should offer to address this. Technically it is not an impossibility by any stretch.

I was thinking, perhaps, we could have some kind of tracking of each of these patterns and look into just how wide-spread the usage of them are. Ideally we'd find the "source" of the pattern, such as some framework and rank them by framework popularity.

What do you think?

In this case, a targeting pattern can be easily found, such as DIV.md-checkbox > label > input[type=checkbox]. It looks like there is a global click handler on the body element which is what is handling the click event after it bubbles up.

The invalid events on the checkbox are an artifact of something, not sure what.

[remi-garcia]

From an "ideological perspective" I am not sure that I want to encourage that kind of JS checkboxes. I'm, obviously, not a web developer and for that reason I might not be able to see the point of not using standard checkboxes.

It feels like these checkboxes were invented by (and for) PrestaShop: https://github.com/PrestaShop
We could try to ping them to see if they want to deal with @tjerry issue?

Yet I just realized that these are still done with "input" and "checkbox" type.

<input type="checkbox" title="" class="js-bulk-action-checkbox" name="order_orders_bulk[]" value="1">

I'm not sure why SLP3 doesn't detect it.

[cpriest]

The reason is that the checkbox and other elements under the have a size of 0px. Technically those checkboxes are probably in the "list of elements" to check a match for, but they have no bounding rect due to the size of 0.

That actually could be a decent all-around solution though, depending on what the bounding rect actually is. For example if its 45,45,45,45 (top, left, bottom, right) we could force any rect to be a minimum of 1px which would then let the calculations select it.

It would still look funky when highlighted due to the incorrect size, but it would "technically" work.

[tjerry]

Thanks for the details.