fix(alert): accepts any value (#16476)

fixes #16170
ionic-team · Nov 27, 2018 · 50b0c6f · 50b0c6f
1 parent 69f63b3
commit 50b0c6f
Show file tree

Hide file tree

Showing 4 changed files with 86 additions and 3 deletions.
diff --git a/core/src/components/alert/alert-interface.ts b/core/src/components/alert/alert-interface.ts
@@ -23,7 +23,7 @@ export interface AlertInput {
   type?: TextFieldTypes | 'checkbox' | 'radio';
   name?: string;
   placeholder?: string;
-  value?: string;
+  value?: any;
   label?: string;
   checked?: boolean;
   disabled?: boolean;

diff --git a/core/src/components/alert/alert.tsx b/core/src/components/alert/alert.tsx
@@ -156,7 +156,7 @@ export class Alert implements ComponentInterface, OverlayInterface {
       type: i.type || 'text',
       name: i.name || `${index}`,
       placeholder: i.placeholder || '',
-      value: i.value || '',
+      value: i.value,
       label: i.label,
       checked: !!i.checked,
       disabled: !!i.disabled,

diff --git a/core/src/components/radio/radio.tsx b/core/src/components/radio/radio.tsx
@@ -105,7 +105,7 @@ export class Radio implements ComponentInterface {
   }
 
   componentWillLoad() {
-    if (this.value == null) {
+    if (this.value === undefined) {
       this.value = this.inputId;
     }
     this.emitStyle();

diff --git a/core/src/components/select/test/conflict/index.html b/core/src/components/select/test/conflict/index.html
@@ -0,0 +1,83 @@
+<!DOCTYPE html>
+<html dir="ltr">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Select - Basic</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
+  <link href="../../../../../css/ionic.bundle.css" rel="stylesheet">
+  <link href="../../../../../scripts/testing/styles.css" rel="stylesheet">
+  <script src="../../../../../dist/ionic.js"></script>
+</head>
+
+<body>
+  <ion-app>
+
+    <ion-header>
+      <ion-toolbar>
+        <ion-title>Select - Conflict</ion-title>
+      </ion-toolbar>
+    </ion-header>
+
+    <ion-content>
+      <ion-list>
+
+        <ion-item>
+          <ion-label>Alert</ion-label>
+          <ion-select id="alert" placeholder="Select One" interface="alert">
+            <ion-select-option class="s-unselected">Unselected</ion-select-option>
+            <ion-select-option class="s-zero">Zero</ion-select-option>
+            <ion-select-option class="s-empty">Empty String</ion-select-option>
+            <ion-select-option class="s-null">Null</ion-select-option>
+          </ion-select>
+        </ion-item>
+
+        <ion-item>
+          <ion-label>Action-sheet</ion-label>
+          <ion-select id="action" placeholder="Select One" interface="action-sheet">
+            <ion-select-option class="s-unselected">Unselected</ion-select-option>
+            <ion-select-option class="s-zero">Zero</ion-select-option>
+            <ion-select-option class="s-empty">Empty String</ion-select-option>
+            <ion-select-option class="s-null">Null</ion-select-option>
+          </ion-select>
+        </ion-item>
+
+        <ion-item>
+          <ion-label>Popover</ion-label>
+          <ion-select id="popover" placeholder="Select One" interface="popover">
+            <ion-select-option class="s-unselected">Unselected</ion-select-option>
+            <ion-select-option class="s-zero">Zero</ion-select-option>
+            <ion-select-option class="s-empty">Empty String</ion-select-option>
+            <ion-select-option class="s-null">Null</ion-select-option>
+          </ion-select>
+        </ion-item>
+
+        <span id="results"></span>
+
+      </ion-list>
+
+    </ion-content>
+
+    <script>
+      Array.from(document.querySelectorAll('.s-unselected')).forEach(s => s.value = undefined);
+      Array.from(document.querySelectorAll('.s-zero')).forEach(s => s.value = 0);
+      Array.from(document.querySelectorAll('.s-empty')).forEach(s => s.value = '');
+      Array.from(document.querySelectorAll('.s-null')).forEach(s => s.value = null);
+
+      function updateValues() {
+        const alert = document.getElementById('alert').value;
+        const actionSheet = document.getElementById('action').value;
+        const popover = document.getElementById('popover').value;
+
+        document.getElementById('results').textContent = `
+        Alert: ${alert}
+        Action-sheet: ${actionSheet}
+        Popover: ${popover}
+        `;
+      }
+      document.addEventListener('ionChange', () => updateValues());
+    </script>
+  </ion-app>
+</body>
+
+</html>