NumericEntryField 'onClick' Event Not Working in Chrome and Edge Browsers

Ignition
1

Recently, we've encountered an issue with NumericEntryField components in our Perspective project when using Google Chrome and Microsoft Edge browsers. This issue has emerged in the past few weeks and affects the behavior of the "onClick" event handler associated with these components.

Behavior:

  1. Expected Behavior (Previously): When self.props.enable was set to true or false, the "onClick" event handler would reliably invoke when a user clicked on the NumericEntryField component.

  2. Current Behavior: However, in recent weeks, when self.props.enable is set to false, the "onClick" event handler no longer triggers as expected when clicking on the NumericEntryField. Strangely, the "onDoubleClick" event handler works as intended.

Additional Information:

  • This behavior issue is specific to Chrome and Edge browsers. Ignition Workstation and the iOS Perspective app, do not exhibit this problem.

  • The reason we need to set self.props.enable to false for some containers is to achieve a consistent visual presentation for displaying numerical tags, matching the appearance of setpoint or data entry containers.

  • The "onClick" event handler is crucial for our workflow as it's used to create trend pop-ups for numerical values on the screen.

We are seeking assistance in resolving this issue or finding a workaround to ensure that the "onClick" event handler works reliably in Chrome and Edge browsers while still allowing us to maintain the desired visual presentation for NumericEntryField components.

-- openAI did help me write this description to best format my question. I've spent countless hours trying to resolve the issue before bothering anyone else just to make sure I wasn't at fault.

2

Did you recently Upgrade your Ignition Version?
What Ignition Version are you currently running?
Have you recently upgraded the Chrome and/or Edge browsers? I know that Chrome has recently had an update.

Have you tried on Firefox?

What operating system? You've said Edge so I assume Windows, however, perhaps there are other operating systems in the mix?

You have said that the iOS perspective app doesn't exhibit the behavior, if you run Chrome on an iOS device does that exhibit the behavior?

Is the onClick event doing any type of filtering that may be causing it to "appear" to not be functioning? (I know you've been troubleshooting this, and this seems like an obvious thing, however, sometimes we get blinders on and miss the simple things.)

onClick, should definitely work regardless of the enabled state.

As a work around you could try using the onMouseDown or onMouseUp event.

3

Thank you for the prompt response, Irose.

We were indeed running Ignition v8.1.26 when this issue surfaced. To address it, I upgraded to the latest version, v8.1.31, but unfortunately, the problem persisted.

I haven't tried Firefox yet, but I will certainly give it a go to see if we encounter the same behavior.

Regarding the operating system, we primarily use Windows 11. However, interestingly, we observed the same issue when using the Chrome browser on Apple devices.

As for the filtering question, we do employ a style-class and assess the "ElementState." Specifically, for "ElementState [disabled]," we make adjustments to the background color, font weight, alignment, color, margin, padding, and set the cursor as a pointer. While I tried using the onMouseUp and onMouseDown events, they produced similar results.

Your suggestion to try the "onMouseUp/Down" sparked the idea to try "onPointerUp" event and it turned out to be a valuable workaround. It's worth noting that this issue appeared relatively recently, despite us having the same configuration on these containers for well over a year. My suspicion leans toward potential updates in Chrome and Edge that may no longer align with our established style.

I'll certainly be exploring Firefox as soon as our IT approves the install request.

Once again, thank you for your assistance in helping us implement a patch, and we'll keep a close eye on any further developments.

4

There have been some reports about this behavior recently. It appears this was an intentional change in Chrome v116 to match Firefox handling of 'onClick' events on disabled components that affected Chromium users.
https://bugs.chromium.org/p/chromium/issues/detail?id=1477379
For some context, the discussion for this change can be found here: Event bubbling on disabled form elements · Issue #5886 · whatwg/html · GitHub

From the GIthub conversation, there are two methods suggested by the developers to get around this change:

  • onPointerUp/Down events is an alternative event that can be utilized to have similar behavior to onClick events directly on disabled components.

  • For cases where events aren't bubbling back up to parent container, you can add pointer-events: none in the CSS of the component. E.g. An onClick script on the root container that also has a disabled button.

2 Likes