Utils.getElements('1') support

* fix #2234
* `Utils.getElements('1')` (called by removeWidget() and others) now checks for digit 'selector' (becomes an id)

Author: adumesny

demo/index.html

@@ -14,7 +14,7 @@ <h1>Demos</h1>
     <li><a href="column.html">Column</a></li>
     <li><a href="float.html">Float grid</a></li>
     <li><a href="knockout.html">Knockout.js</a></li>
-    <li><a href="mobile.html">Mobile touch (JQ)</a></li>
+    <li><a href="mobile.html">Mobile touch</a></li>
     <li><a href="nested.html">Nested grids</a></li>
     <li><a href="nested_constraint.html">Nested Constraint grids</a></li>
     <li><a href="nested_advanced.html">Nested Advanced grids</a></li>

doc/CHANGES.md

@@ -86,6 +86,7 @@ Change log
 
 ## 8.0.0-dev (TBD)
 * feat: [#2275](https://github.com/gridstack/gridstack.js/issues/2275) `setupDragIn()` now can take an array or elements (in addition to selector string) and optional parent root (for shadow DOM support)
+* fix: [#2234](https://github.com/gridstack/gridstack.js/issues/2234) `Utils.getElements('1')` (called by removeWidget() and others) now checks for digit 'selector' (becomes an id).
 
 ## 8.0.0 (2023-04-29)
 * package is now ES2020 (TS exported files), webpack all.js still umd (better than commonjs for browsers), still have es5/ files unchanged (for now)

src/utils.ts

@@ -56,6 +56,15 @@ export class Utils {
   /** convert a potential selector into actual list of html elements. optional root which defaults to document (for shadow dom) */
   static getElements(els: GridStackElement, root = document): HTMLElement[] {
     if (typeof els === 'string') {
+
+      // Note: very common for people use to id='1,2,3' which is only legal as HTML5 id, but not CSS selectors
+      // so if we start with a number, assume it's an id and just return that one item...
+      // see https://github.com/gridstack/gridstack.js/issues/2234#issuecomment-1523796562
+      if(!isNaN(+els[0])) { // start with digit
+        const el = root.getElementById(els);
+        return el ? [el] : [];
+      }
+
       let list = root.querySelectorAll(els);
       if (!list.length && els[0] !== '.' && els[0] !== '#') {
         list = root.querySelectorAll('.' + els);