From 706cc10e24177e9b9fae87862aa8bd4d4fad310b Mon Sep 17 00:00:00 2001
From: Alexander Harding <alexander.harding@software.dell.com>
Date: Tue, 1 Apr 2014 14:45:44 -0500
Subject: [PATCH] If the first element in a template is an <option> or
 <optgroup> tag, the compiler will wrap it with a <select> tag. This satisfies
 IE9.

Closes #6926
---
 src/ng/compile.js      | 17 +++++++++++++--
 test/ng/compileSpec.js | 48 ++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 63 insertions(+), 2 deletions(-)

diff --git a/src/ng/compile.js b/src/ng/compile.js
index 58c3b5fc6f37..1f8a53c9c787 100644
--- a/src/ng/compile.js
+++ b/src/ng/compile.js
@@ -514,7 +514,8 @@ function $CompileProvider($provide, $$sanitizeUriProvider) {
       Suffix = 'Directive',
       COMMENT_DIRECTIVE_REGEXP = /^\s*directive\:\s*([\d\w\-_]+)\s+(.*)$/,
       CLASS_DIRECTIVE_REGEXP = /(([\d\w\-_]+)(?:\:([^;]+))?;?)/,
-      TABLE_CONTENT_REGEXP = /^<\s*(tr|th|td|thead|tbody|tfoot)(\s+[^>]*)?>/i;
+      TABLE_CONTENT_REGEXP = /^<\s*(tr|th|td|thead|tbody|tfoot)(\s+[^>]*)?>/i,
+      SELECT_CONTENT_REGEXP = /^<\s*(option|optgroup)(\s+[^>]*)?>/i;
 
   // Ref: http://developers.whatwg.org/webappapis.html#event-handler-idl-attributes
   // The assumption is that future DOM event attribute names will begin with
@@ -1657,7 +1658,13 @@ function $CompileProvider($provide, $$sanitizeUriProvider) {
       });
     }
 
-
+    /**
+     * On IE9, certain elements such as <thead> and <option> need to be
+     * wrapped with other elements like <table> and <select>, respectively.
+     *
+     * @param {string} template The template to check
+     * @returns {JqLite} The wrapped template
+     */
     function directiveTemplateContents(template) {
       var type;
       template = trim(template);
@@ -1672,6 +1679,12 @@ function $CompileProvider($provide, $$sanitizeUriProvider) {
           return table.children('tr');
         }
         return table.children('tr').contents();
+      } else if ((type = SELECT_CONTENT_REGEXP.exec(template))) {
+        type = type[1].toLowerCase();
+        var select = jqLite('<select>' + template + '</select>');
+        if (/(option|optgroup)/.test(type)) {
+          return select.children(type);
+        }
       }
       return jqLite('<div>' +
                       template +
diff --git a/test/ng/compileSpec.js b/test/ng/compileSpec.js
index 96d3c18bc7ee..f443ef963ca4 100755
--- a/test/ng/compileSpec.js
+++ b/test/ng/compileSpec.js
@@ -541,6 +541,14 @@ describe('$compile', function() {
             replace: true,
             template: '<tfoot><tr><td>TD</td></tr></tfoot>'
           }));
+          directive('replaceWithOption', valueFn({
+            replace: true,
+            template: '<option>OPTION</option>'
+          }));
+          directive('replaceWithOptgroup', valueFn({
+            replace: true,
+            template: '<optgroup>OPTGROUP</optgroup>'
+          }));
         }));
 
 
@@ -746,6 +754,20 @@ describe('$compile', function() {
           }).not.toThrow();
           expect(nodeName_(element)).toMatch(/tfoot/i);
         }));
+
+        it('should support templates with root <option> tags', inject(function($compile, $rootScope) {
+          expect(function() {
+            element = $compile('<div replace-with-option></div>')($rootScope);
+          }).not.toThrow();
+          expect(nodeName_(element)).toMatch(/option/i);
+        }));
+
+        it('should support templates with root <optgroup> tags', inject(function($compile, $rootScope) {
+          expect(function() {
+            element = $compile('<div replace-with-optgroup></div>')($rootScope);
+          }).not.toThrow();
+          expect(nodeName_(element)).toMatch(/optgroup/i);
+        }));
       });
 
 
@@ -867,6 +889,14 @@ describe('$compile', function() {
               replace: true,
               templateUrl: 'tfoot.html'
             }));
+            directive('replaceWithOption', valueFn({
+              replace: true,
+              templateUrl: 'option.html'
+            }));
+            directive('replaceWithOptgroup', valueFn({
+              replace: true,
+              templateUrl: 'optgroup.html'
+            }));
           }
         ));
 
@@ -1556,6 +1586,24 @@ describe('$compile', function() {
           $rootScope.$digest();
           expect(nodeName_(element)).toMatch(/tfoot/i);
         }));
+
+        it('should support templates with root <option> tags', inject(function($compile, $rootScope, $templateCache) {
+          $templateCache.put('option.html', '<option>OPTION</option>');
+          expect(function() {
+            element = $compile('<div replace-with-option></div>')($rootScope);
+          }).not.toThrow();
+          $rootScope.$digest();
+          expect(nodeName_(element)).toMatch(/option/i);
+        }));
+
+        it('should support templates with root <optgroup> tags', inject(function($compile, $rootScope, $templateCache) {
+          $templateCache.put('optgroup.html', '<optgroup>OPTGROUP</optgroup>');
+          expect(function() {
+            element = $compile('<div replace-with-optgroup></div>')($rootScope);
+          }).not.toThrow();
+          $rootScope.$digest();
+          expect(nodeName_(element)).toMatch(/optgroup/i);
+        }));
       });