#se-input webcomponent event change update to svgedit

src/editor/svgedit.js

@@ -1888,7 +1888,7 @@ editor.init = () => {
       const opacPerc = (selectedElement.getAttribute('opacity') || 1.0) * 100;
       $('#group_opacity').val(opacPerc);
       $('#opac_slider').slider('option', 'value', opacPerc);
-      $('#elem_id').val(selectedElement.id);
+      $id('elem_id').value = selectedElement.id;
       $('#elem_class').val(selectedElement.getAttribute('class'));
     }
 
@@ -3047,6 +3047,45 @@ editor.init = () => {
     svgCanvas.setGroupTitle(this.value);
   });
 
+  const attrChanger = function (e) {
+    const attr = e.target.getAttribute('data-attr');
+    let val = e.target.value;
+    const valid = isValidUnit(attr, val, selectedElement);
+
+    if (!valid) {
+      e.target.value = selectedElement.getAttribute(attr);
+      /* await */ $.alert(uiStrings.notification.invalidAttrValGiven);
+      return false;
+    }
+
+    if (attr !== 'id' && attr !== 'class') {
+      if (isNaN(val)) {
+        val = svgCanvas.convertToNum(attr, val);
+      } else if (curConfig.baseUnit !== 'px') {
+        // Convert unitless value to one with given unit
+
+        const unitData = getTypeMap();
+
+        if (selectedElement[attr] || svgCanvas.getMode() === 'pathedit' || attr === 'x' || attr === 'y') {
+          val *= unitData[curConfig.baseUnit];
+        }
+      }
+    }
+
+    // if the user is changing the id, then de-select the element first
+    // change the ID, then re-select it with the new ID
+    if (attr === 'id') {
+      const elem = selectedElement;
+      svgCanvas.clearSelection();
+      elem.id = val;
+      svgCanvas.addToSelection([elem], true);
+    } else {
+      svgCanvas.changeSelectedAttribute(attr, val);
+    }
+    // e.target.blur();
+    return true;
+  };
+
   $('.attr_changer').change(function () {
     const attr = this.getAttribute('data-attr');
     let val = this.value;
@@ -4860,6 +4899,7 @@ editor.init = () => {
 
     // register actions for bottom panel
     $id('zoom').addEventListener('change', (e) => changeZoom(Number(e.target.value)));
+    $id('elem_id').addEventListener('change', (e) => attrChanger(e));
 
     // register actions for layer toolbar
     $id('layer_new').addEventListener('click', newLayer);