Umlaut not displayed correctly in VEX alert of repeater trash feature

[BernhardBaumrock]

This is what I see when double-clicking the trash icon of a repeater item:

The only related issue that I found is this: https://github.com/processwire/processwire-issues/issues/117

I also asked Jens whether this is an issue with his german translation or a core issue. He said it's a core issue, so here we are ;)

[matjazpotocnik]

Isn't this related? https://github.com/processwire/processwire-issues/issues/2019

[BernhardBaumrock]

@matjazpotocnik absolutely! Thx for the reference. I knew I posted it but I couldn't find it any more :)

[BernhardBaumrock]

Seems to me that all of those are related to VEX popups?

[ryancramerdesign]

@BernhardBaumrock I did some testing and the issue appears to be in Vex. Even just a & gets converted to &. I tried to debug it directly in Vex but wasn't successful. Vex doesn't appear to be maintained anymore, so wondering if maybe we should switch to a different library for handing alert, confirm and prompt boxes.

[BernhardBaumrock]

Wow, what a bummer. Thx for looking into it Ryan!

What about going with UIkit's native alerts then? https://getuikit.com/docs/modal#modal-dialogs

I think I had some trouble with the confirmation dialog api but I can't remember exactly - or maybe they changed it in an update as from the docs on first glance it looks fine. But I'm happy to help wherever I can with that.

And I'm a bit afraid of having to refactor some modules that rely on vex dialogs, but it should not be too hard I guess and if it's necessary, it's necessary...

[ryancramerdesign]

@BernhardBaumrock I won't remove Vex, I'm just thinking of replacing what ProcessWire.alert() and ProcesssWire.confirm() use. Going the Uikit route sounds like a good idea, I'll look into it. The non-Uikit/legacy admin themes can just fallback to the standard JS alert and confirm boxes.

[BernhardBaumrock]

Ah, I see, yeah that sounds like a good solution then :)

[matjazpotocnik]

@ryancramerdesign

if (options.unsafeMessage && !options.message) {
        options.message = options.unsafeMessage
      } else if (options.message) {
        options.message = vex._escapeHtml(options.message)
      }

// Use the DOM's HTML parsing to escape any dangerous strings
var escapeHtml = function escapeHtml (str) {
  if (typeof str !== 'undefined') {
    var div = document.createElement('div')
    div.appendChild(document.createTextNode(str))
    return div.innerHTML
  } else {
    return ''
  }

A quick fix fould be to return str instead of 'return div.innerHTML' or use ProcessWire.alert("&",true); (allowMarkup set to true, default is false). main.js, line 505, ProcessWire.alert function.

But I agree, vex is unmaintained for several years, there are many open issues regarding security, UX and accessibility and should be replaced. Maybe https://github.com/sweetalert2/sweetalert2 Or plain alert/message/prompt JavaScript boxes? They are not fancy but work, are accessible, and don't require third-party libraries. Even dialog can be used https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/dialog

[teppokoivula]

Even dialog can be used https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/dialog

Still using sweetalert2 in some cases (mostly because it comes with all the bells and whistles already baked in) but dialog is definitely the way to go for anything new :)

[ryancramerdesign]

@BernhardBaumrock I've updated the alert, confirm and prompt functions to use Uikit modals rather than Vex modals, at least when Uikit is available. I'll look into native dialogs as well, but the Uikit ones were a good fit for now, as they work similarly to the Vex ones. Do you find that it fixes the issue?

[matjazpotocnik]

@ryancramerdesign,

typeof is missing when comparing funcOk and funcCancel with "undefined" in ProcessWire.confirm function, lines 531 and 533.

This line: @param bool Allow markup in confirm message? (default=false) should probably be @param allowMarkup Allow markup in confirm message? (default=false)?