fix getting DOM element by number id

id with number works (api that uses `GridStackElement` handle more string formats)

Author: adumesny

doc/CHANGES.md

@@ -44,6 +44,7 @@ Change log
 
 - fix `class="ui-draggable-disabled ui-resizable-disabled"` have been added back to static grid items, so existing CSS rule to style continue working [1435](https://github.com/gridstack/gridstack.js/issues/1435)
 - add `data-gs-staticGrid` attribute
+- fix getting DOM element by id with number works (api that uses `GridStackElement` handle more string formats)
 
 ## 2.1.0 (2020-10-28)
 

spec/gridstack-spec.ts

@@ -952,7 +952,70 @@ describe('gridstack', function() {
       expect(parseInt(widget.getAttribute('data-gs-height'), 10)).toBe(1);
       expect(widget.getAttribute('data-gs-id')).toBe('foo');
     });
-});
+  });
+
+  describe('makeWidget()', function() {
+    beforeEach(function() {
+      document.body.insertAdjacentHTML('afterbegin', gridstackEmptyHTML);
+    });
+    afterEach(function() {
+      document.body.removeChild(document.getElementById('gs-cont'));
+    });
+    it('passing element', function() {
+      let grid = GridStack.init();
+      let doc = document.implementation.createHTMLDocument();
+      doc.body.innerHTML = '<div><div class="grid-stack-item-content"></div></div>';
+      let el = doc.body.children[0] as HTMLElement;
+      grid.el.appendChild(el);
+      let widget = grid.makeWidget(el);
+      expect(parseInt(widget.getAttribute('data-gs-x'), 10)).toBe(0);
+    });
+    it('passing class', function() {
+      let grid = GridStack.init();
+      let doc = document.implementation.createHTMLDocument();
+      doc.body.innerHTML = '<div class="item"><div class="grid-stack-item-content"></div></div>';
+      let el = doc.body.children[0] as HTMLElement;
+      grid.el.appendChild(el);
+      let widget = grid.makeWidget('.item');
+      expect(parseInt(widget.getAttribute('data-gs-x'), 10)).toBe(0);
+    });
+    it('passing class no dot', function() {
+      let grid = GridStack.init();
+      let doc = document.implementation.createHTMLDocument();
+      doc.body.innerHTML = '<div class="item"><div class="grid-stack-item-content"></div></div>';
+      let el = doc.body.children[0] as HTMLElement;
+      grid.el.appendChild(el);
+      let widget = grid.makeWidget('item');
+      expect(parseInt(widget.getAttribute('data-gs-x'), 10)).toBe(0);
+    });
+    it('passing id', function() {
+      let grid = GridStack.init();
+      let doc = document.implementation.createHTMLDocument();
+      doc.body.innerHTML = '<div id="item"><div class="grid-stack-item-content"></div></div>';
+      let el = doc.body.children[0] as HTMLElement;
+      grid.el.appendChild(el);
+      let widget = grid.makeWidget('#item');
+      expect(parseInt(widget.getAttribute('data-gs-x'), 10)).toBe(0);
+    });
+    it('passing id no #', function() {
+      let grid = GridStack.init();
+      let doc = document.implementation.createHTMLDocument();
+      doc.body.innerHTML = '<div id="item"><div class="grid-stack-item-content"></div></div>';
+      let el = doc.body.children[0] as HTMLElement;
+      grid.el.appendChild(el);
+      let widget = grid.makeWidget('item');
+      expect(parseInt(widget.getAttribute('data-gs-x'), 10)).toBe(0);
+    });
+    it('passing id as number', function() {
+      let grid = GridStack.init();
+      let doc = document.implementation.createHTMLDocument();
+      doc.body.innerHTML = '<div id="1"><div class="grid-stack-item-content"></div></div>';
+      let el = doc.body.children[0] as HTMLElement;
+      grid.el.appendChild(el);
+      let widget = grid.makeWidget('1');
+      expect(parseInt(widget.getAttribute('data-gs-x'), 10)).toBe(0);
+    });
+  });
 
   describe('method getFloat()', function() {
     beforeEach(function() {

src/gridstack.ts

@@ -1773,11 +1773,23 @@ export class GridStack {
   /** @internal convert a potential selector into actual element */
   private static getElement(els: GridStackElement = '.grid-stack-item'): GridItemHTMLElement {
     if (typeof els === 'string') {
-      let el = document.querySelector(els);
-      if (!el && els[0] !== '.' && els[0] !== '#') {
-        el = document.querySelector('#' + els);
-        if (!el) { el = document.querySelector('.' + els) }
+      if (!els.length) { return null}
+      if (els[0] === '#') {
+        return document.getElementById(els.substring(1));
+      }
+      if (els[0] === '.') {
+        return document.querySelector(els);
+      }
+
+      // if we start with a digit, assume it's an id (error calling querySelector('#1')) as class are not valid CSS
+      if(!isNaN(+els[0])) { // start with digit
+        return document.getElementById(els);
       }
+
+      // finally try string, then id then class
+      let el = document.querySelector(els);
+      if (!el) { el = document.getElementById(els) }
+      if (!el) { el = document.querySelector('.' + els) }
       return el as GridItemHTMLElement;
     }
     return els;