Numeric sp-textfield issues & buggyfill

decimal-workaround.js

(function () {
  function fixNumericSpTextField() {
    if(require("uxp").versions.uxp.startsWith("uxp-5.5.1")) {
      const candidates = document.querySelectorAll("sp-textfield[type=number]");
      candidates.forEach(el => {
        el.setAttribute("type", "text");
        el.setAttribute("data-uxp-type", "number");
      });
    }
    document.addEventListener("input", evt => {
      const { target } = evt;
      if (target.tagName === "SP-TEXTFIELD") {
        if (target.getAttribute("data-uxp-type") === "number") {
          if (Number.isNaN(Number(target.value)) || target.value.indexOf(" ") > -1) {
            target.value = target.getAttribute("data-uxp-last-good-value") || "0";
          } else {
            target.setAttribute("data-uxp-last-good-value", target.value.trim());
          }
        }
      }
    });
    const timer = setInterval(() => {
    /* IMPORTANT: next lines use private APIs to make  sure we keep 
       fixing up text fields as they are added to the DOM.
       DO NOT USE _domClient OR frameAck FOR ANY OTHER PURPOSE. */
      if (document._domClient) {
        document._domClient.addEventListener("frameAck", fixNumericSpTextField);
        clearInterval(timer);
        fixNumericSpTextField();
      }
    }, 16);
  }
})();