extra fallback to nodeName to help keep us on the rails if possible

Author: tbiethman

src/getTag.js

@@ -1,3 +1,7 @@
+function isString(value) {
+  return typeof value === 'string';
+}
+
 /**
  * Returns the Tag of the element
  * @param  { Object } element
@@ -6,18 +10,26 @@
  */
 export function getTag( el, filter )
 {
-  if (typeof el.tagName !== 'string') {
-    // If the tagName attribute has been overridden, we should 
-    // return null and not use tagName for selector generation.
-    //
-    // This can happen when a <form> element contains an <input>
-    // with an id of `tagName`. In this case, the form element's
-    // tagName property is a reference to the input element, not
-    // a string.
-    return null;
+  let tagName = el.tagName;
+
+  // If the tagName attribute has been overridden, we should 
+  // check the nodeName property instead. If the nodeName property
+  // is also not a string, we should return null and ignore tagName
+  // for selector generation.
+  //
+  // This can happen when a <form> element contains an <input>
+  // with an id of `tagName`. In this case, the form element's
+  // tagName property is a reference to the input element, not
+  // a string.
+  if (!isString(tagName)) {
+    tagName = el.nodeName;
+
+    if (!isString(tagName)) {
+      return null;
+    }
   }
 
-  const tagName = el.tagName.toLowerCase().replace(/:/g, '\\:')
+  tagName = tagName.toLowerCase().replace(/:/g, '\\:')
 
   if (filter && !filter('tag', 'tag', tagName)) {
     return null;

test/unique-selector.js

@@ -128,7 +128,7 @@ describe( 'Unique Selector Tests', () =>
     expect( uniqueSelector ).to.equal( 'a' );
   } );
 
-  it( 'Tag - filtered due to property override', () =>
+  it( 'Tag - fallback to nodeName', () =>
   {
     $( 'body' ).append(`
       <div class="test2">
@@ -154,9 +154,48 @@ describe( 'Unique Selector Tests', () =>
     expect(typeof formNode.tagName).to.not.equal('string')
 
     const uniqueSelector = unique( formNode );
-    expect( uniqueSelector ).to.equal( '.test2 > :nth-child(1)' );
+    // nodeName === 'form'
+    expect( uniqueSelector ).to.equal( 'form' );
   } );
 
+  it( 'Tag - ignored due to property override', () =>
+    {
+      $( 'body' ).append(`
+        <div class="test2">
+          <form action="" method="get">
+            <div class="form-example">
+              <label for="name">Enter your name: </label>
+              <input type="text" name="name" id="tagName" required />
+            </div>
+          </form>
+        </div>
+      `);
+  
+      const formNode = $( 'form' ).get( 0 );
+  
+      // JSDOM doesn't actually exhibit this behavior;
+      // forcing the test to behave as a browser does.
+      Object.defineProperty(formNode, 'tagName', {
+        get: () => {
+          return $( 'input#tagName' ).get( 0 );
+        }
+      })
+      Object.defineProperty(formNode, 'nodeName', {
+        get: () => {
+          return $( 'input#tagName' ).get( 0 );
+        }
+      })
+  
+      expect(typeof formNode.tagName).to.not.equal('string')
+      expect(typeof formNode.nodeName).to.not.equal('string')
+
+      const uniqueSelector = unique( formNode );
+      // with nodeName overridden, the isElement check will fail
+      // and the wildcard selector is returned for that element.
+      // This really shouldn't happen in practice.
+      expect( uniqueSelector ).to.equal( '.test2 > *' );
+  } );  
+
   it( 'Attributes', () =>
   {
     $( 'body' ).append( '<div class="test5" test="5"></div>' );