fix(range): participate in <form> (#19008)

ionic-team · Aug 6, 2019 · 8f7853c · 8f7853c
1 parent f94300c
commit 8f7853c
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 3 deletions.
diff --git a/core/src/components/item/test/inputs/e2e.ts b/core/src/components/item/test/inputs/e2e.ts
@@ -7,7 +7,7 @@ test('item: inputs', async () => {
 
   // check form
   await page.click('#submit');
-  await checkFormResult(page, '{"date":"","select":"n64","toggle":"","input":"","input2":"","checkbox":""}');
+  await checkFormResult(page, '{"date":"","select":"n64","toggle":"","input":"","input2":"","checkbox":"","range":"10"}');
   await page.waitFor(100);
 
   // Default case, enabled and no value
@@ -36,7 +36,7 @@ test('item: inputs', async () => {
 
   // check form
   await page.click('#submit');
-  await checkFormResult(page, '{"date":"2016-12-09","select":"nes","toggle":"on","input":"Some text","input2":"Some text","checkbox":"on"}');
+  await checkFormResult(page, '{"date":"2016-12-09","select":"nes","toggle":"on","input":"Some text","input2":"Some text","checkbox":"on","range":"20"}');
   await page.waitFor(100);
 
   compare = await page.compareScreenshot('should reenable and set value');

diff --git a/core/src/components/range/range.tsx b/core/src/components/range/range.tsx
@@ -2,7 +2,7 @@ import { Component, ComponentInterface, Element, Event, EventEmitter, Host, Prop
 
 import { getIonMode } from '../../global/ionic-global';
 import { Color, Gesture, GestureDetail, KnobName, RangeChangeEventDetail, RangeValue, StyleEventDetail } from '../../interface';
-import { clamp, debounceEvent } from '../../utils/helpers';
+import { clamp, debounceEvent, renderHiddenInput } from '../../utils/helpers';
 import { createColorClasses, hostContext } from '../../utils/theme';
 
 /**
@@ -406,6 +406,8 @@ export class Range implements ComponentInterface {
       }
     }
 
+    renderHiddenInput(true, el, this.name, JSON.stringify(this.getValue()), disabled);
+
     return (
       <Host
         onFocusin={this.onFocus}