From 9656b431c363d460e44064587c3a9b76b03b6e02 Mon Sep 17 00:00:00 2001
From: Sergio Arbeo <serabe@gmail.com>
Date: Thu, 21 Sep 2017 00:07:35 +0200
Subject: [PATCH] [BUGFIX beta] Fix range input values

If an input a type range is set after value but before min and max, it
produces different results than done in markup.

Given IE9 does not support range inputs, tests first make sure that the
type of the input is range.

Closes #15675
---
 .../lib/components/text_field.js              |  2 +-
 .../tests/integration/helpers/input-test.js   | 53 +++++++++++++++++++
 2 files changed, 54 insertions(+), 1 deletion(-)

diff --git a/packages/ember-glimmer/lib/components/text_field.js b/packages/ember-glimmer/lib/components/text_field.js
index 161fac6455a..29cf643cb9a 100644
--- a/packages/ember-glimmer/lib/components/text_field.js
+++ b/packages/ember-glimmer/lib/components/text_field.js
@@ -70,6 +70,7 @@ export default Component.extend(TextSupport, {
     'inputmode',
     'lang',
     'list',
+    'type', // needs to be before min and max. See #15675
     'max',
     'min',
     'multiple',
@@ -77,7 +78,6 @@ export default Component.extend(TextSupport, {
     'pattern',
     'size',
     'step',
-    'type',
     'value',
     'width'
   ],
diff --git a/packages/ember-glimmer/tests/integration/helpers/input-test.js b/packages/ember-glimmer/tests/integration/helpers/input-test.js
index aed3252c66e..31d26d2a26a 100644
--- a/packages/ember-glimmer/tests/integration/helpers/input-test.js
+++ b/packages/ember-glimmer/tests/integration/helpers/input-test.js
@@ -653,3 +653,56 @@ moduleFor(`Helpers test: {{input type='text'}}`, class extends InputRenderingTes
     this.assertAttr('tabindex', undefined);
   }
 });
+
+// These are the permutations of the set:
+// ['type="range"', 'min="-5" max="50"', 'value="%x"']
+[
+  'type="range" min="-5" max="50" value="%x"',
+  'type="range" value="%x" min="-5" max="50"',
+  'min="-5" max="50" type="range" value="%x"',
+  'min="-5" max="50" value="%x" type="range"',
+  'value="%x" min="-5" max="50" type="range"',
+  'value="%x" type="range" min="-5" max="50"',
+].forEach(attrs => {
+  moduleFor(`[GH#15675] Helpers test: {{input ${attrs}}}`, class extends InputRenderingTest {
+    renderInput(value = 25) {
+      this.render(`{{input ${ attrs.replace("%x", value) }}}`);
+    }
+
+    assertValue(expected) {
+      let type = this.$input().attr('type');
+
+      if (type !== 'range') {
+        this.assert.ok(true, 'IE9 does not support range items');
+        return;
+      }
+
+      super.assertValue(expected);
+    }
+
+    ['@test value over default max but below set max is kept'](assert) {
+      this.renderInput("25");
+      this.assertValue("25");
+    }
+
+    ['@test value below default min but above set min is kept'](assert) {
+      this.renderInput("-2");
+      this.assertValue("-2");
+    }
+
+    ['@test in the valid default range is kept'](assert) {
+      this.renderInput("5");
+      this.assertValue("5");
+    }
+
+    ['@test value above max is reset to max'](assert) {
+      this.renderInput("55");
+      this.assertValue("50");
+    }
+
+    ['@test value below min is reset to min'](assert) {
+      this.renderInput("-10");
+      this.assertValue("-5");
+    }
+  });
+});