Progress Bar Update Peculiarity

Questions & Suggestions
1

This macro demonstrates an issue with the <progress> tag in a Custom HTML Prompt.

Its Report button will display the current value of the progress bar. The Add button will add 10 units (the scale runs to 100) to the current value.

When you add 10 and report the result, the macro correctly displays the additional value but the progress bar (the element with that value) does not update. It stays at 10, where it is initially set.

To quit, just use the red dot to close the window.

(The workaround I've adopted is to rewrite the innerHTML of the element containing the progress bar entirely, forcing it to display the correct value. But just changing the value of the element should do the same thing.)

Progress Bar Update Test Macro

Progress Bar Update Test.kmmacros (2.6 KB)

Keyboard Maestro Export
Keyboard Maestro Export1248×1430 178 KB

2

It's a Safari/WebKit issue. The same thing happens in BBEdit’s Preview, as well as in Safari.

The resolution is to replace the progress bar with a copy of itself every time you update it:

function myAdd() {
  var pb = document.getElementById("myProgress");
  pb.value += 10;
  pb.replaceWith(pb);
}
3 Likes