QR Code Click Event Triggered Outside QR Code Boundary in QREventView.java

[jturfanbasis]

Summary:

The QR code click event is incorrectly triggered when clicking outside of the QR code area, specifically to the right of the QR code. The event should only trigger when the QR code itself is clicked.

Steps to Reproduce:

Open the application containing the QR code.
Click to the right side of the QR code (outside of the QR boundary).
Click in the blank space to the right of the QR code.

Expected Result:

The "Message" dialog should only be displayed when the QR code itself is clicked.

Actual Result:

The "Message" dialog is displayed when clicking outside the QR code area (to the right side).

Environment Details:

Browser: Chrome Version 131.0.6778.206, Firefox 133.0.3
Operating System: Windows 11

QR.mp4

[bbrennanbasis]

The width for the composite element, sl-qr-code, is never explicitly declared. The width defined is the child canvas element with the setSize() method. So when sl-qr-code is inside a FlexLayout component, it will occupy the full width of that layout, as seen with the blue highlighted part in John's video starting at 0:07.

Solutions:

Solution A

Set the width of the bound component (the FlexLayout) to be the same width as the QR code (200px).

Solution B

Change the component that QREventView extends from a FlexLayout to a Div.