input-num: width / selection

Author: sidewayss

README.md

@@ -272,7 +272,9 @@ Based on an informal survey and my own repeated frustrations, I came to the conc
 - When you use `Shift+Tab` to activate the element, the `<input>` gets the focus. The next `Shift+Tab` activates the outer element. The next one blurs the element.
 
 ### HTML Attributes / JavaScript Properties
-There are several inverted boolean attributes / properties, where the attribute value is the opposite of the property value. The attribute names all start with `no-`. They are all for turning features off. The default is always attribute = unset / property = `true`. The negative makes sense for the boolean attribute name, but it's clumsy for the property.
+There are several inverted boolean attributes / properties, where the attribute value is the opposite of the property value. They are all for turning features off. The negative makes sense for the boolean attribute name, but it's clumsy for the property. The attribute names all start with `no-`. The default is always:
+- attribute = unset (null)
+- property = `true`
 
 #### DOM Attributes
 Property name same as attribute. String as attribute / Number as property.

input-num.js

@@ -489,10 +489,11 @@ static observedAttributes = [
             input = this.#input,
             dir   = input.selectionDirection,
             start = input.selectionStart,
-            dist  = input.selectionEnd - start,
+            end   = input.selectionEnd,
+            dist  = end - start,
             val   = input.value,
             orig  = [{num:start, str:val.slice(0, start)},
-                     {num:dist,  str:val.slice(start, dist)}];
+                     {num:dist,  str:val.slice(start, end)}];
             for (obj of orig) {
                 match = obj.str.match(/[^\d-.eE]/g);
                 range.push(obj.num - (match ? match.length : 0))
@@ -725,11 +726,11 @@ static observedAttributes = [
         else
             btns = 0;               // no spinning, no confirming = no buttons
 
-        if (isWidth || isAlign) {
+        if (isWidth || isAlign) {   // get widths for max, min, units
             let txt, type;
             style    = getComputedStyle(this.#input);
             isItalic = (style.fontStyle == "italic");
-            for (txt of this.#texts) {                // units, max, and min
+            for (txt of this.#texts) {
                 id = txt.id;
                 txt.innerHTML = (id == UNITS)
                               ? this.units
@@ -750,7 +751,7 @@ static observedAttributes = [
             chars = Math.max(width[MAX], width[MIN]), // text width w/o units
             obj   = {
                 [event.blur] : chars + extra - diff,
-                [event.focus]: chars,
+                [event.focus]: chars + extra - btns,
                 [mouse.over] : chars
             }
             if (isItalic)           // right-aligned italics often truncate