diff --git a/ionic/components.ts b/ionic/components.ts
index cde02aa715..b8e6e64809 100644
--- a/ionic/components.ts
+++ b/ionic/components.ts
@@ -6,7 +6,6 @@ export * from 'ionic/components/blur/blur'
export * from 'ionic/components/button/button'
export * from 'ionic/components/checkbox/checkbox'
export * from 'ionic/components/content/content'
-export * from 'ionic/components/form/form'
export * from 'ionic/components/icon/icon'
export * from 'ionic/components/item/item'
export * from 'ionic/components/item/item-group'
diff --git a/ionic/components/checkbox/checkbox.ts b/ionic/components/checkbox/checkbox.ts
index e32ff3fd4e..97d9346997 100644
--- a/ionic/components/checkbox/checkbox.ts
+++ b/ionic/components/checkbox/checkbox.ts
@@ -1,7 +1,7 @@
import {Component, Directive, Optional, NgControl, ElementRef, Renderer} from 'angular2/angular2';
import {Ion} from '../ion';
-import {IonicForm} from '../form/form';
+import {IonicForm} from '../../util/form';
/**
* The checkbox is no different than the HTML checkbox input, except it's styled differently
diff --git a/ionic/components/content/content.ts b/ionic/components/content/content.ts
index c670aafa5b..ac0c2ecf88 100644
--- a/ionic/components/content/content.ts
+++ b/ionic/components/content/content.ts
@@ -2,7 +2,7 @@ import {Component, ElementRef, Optional} from 'angular2/angular2';
import {Ion} from '../ion';
import {IonicConfig} from '../../config/config';
-import {IonicPlatform} from '../../platform/platform';
+import {IonicKeyboard} from '../../util/keyboard';
import {ViewController} from '../nav/view-controller';
import {Tab} from '../tabs/tab';
import {ScrollTo} from '../../animations/scroll-to';
@@ -33,10 +33,10 @@ export class Content extends Ion {
* @param {ElementRef} elementRef A reference to the component's DOM element.
* @param {IonicConfig} config The config object to change content's default settings.
*/
- constructor(elementRef: ElementRef, config: IonicConfig, platform: IonicPlatform, @Optional() viewCtrl: ViewController) {
+ constructor(elementRef: ElementRef, config: IonicConfig, keyboard: IonicKeyboard, @Optional() viewCtrl: ViewController) {
super(elementRef, config);
this.scrollPadding = 0;
- this.platform = platform;
+ this.keyboard = keyboard;
if(viewCtrl) {
viewCtrl.setContent(this);
@@ -168,7 +168,7 @@ export class Content extends Ion {
if (!this.keyboardPromise) {
- this.keyboardPromise = this.platform.onKeyboardClose(() => {
+ this.keyboardPromise = this.keyboard.onClose(() => {
if (this) {
this.scrollPadding = 0;
if (this.scrollElement) this.scrollElement.style.paddingBottom = '';
diff --git a/ionic/components/form/form.scss b/ionic/components/form/form.scss
deleted file mode 100644
index 03d613739d..0000000000
--- a/ionic/components/form/form.scss
+++ /dev/null
@@ -1,98 +0,0 @@
-
-// Forms
-// --------------------------------------------------
-
-ion-input {
-
- // text inputs
- textarea,
- input[type="text"],
- input[type="password"],
- input[type="datetime"],
- input[type="datetime-local"],
- input[type="date"],
- input[type="month"],
- input[type="time"],
- input[type="week"],
- input[type="number"],
- input[type="email"],
- input[type="url"],
- input[type="search"],
- input[type="tel"],
- input[type="color"] {
- display: block;
- background: transparent;
- border: 0;
- width: 100%;
- }
-
-}
-
-textarea {
- margin: 0;
- padding: 0;
- height: auto;
- overflow: auto;
- font: inherit;
- color: inherit;
-}
-
-.platform-mobile textarea {
- resize: none;
-}
-
-
-
-// Placeholder
-// -------------------------------
-input,
-textarea {
- @include placeholder();
-}
-
-
-// DISABLED STATE
-// -------------------------------
-
-// Disabled and read-only inputs
-input[disabled],
-select[disabled],
-textarea[disabled],
-select[readonly] {
- cursor: not-allowed;
-}
-
-
-// Focus Utils
-// -------------------------------
-
-focus-ctrl {
- position: fixed;
-
- input,
- button {
- position: fixed;
- top: 1px;
- width: 9px;
- left: -9999px;
- z-index: 9999;
- }
-}
-
-
-/*focus-ctrl input[tabindex="999"] {
- left: 0px;
-}
-
-focus-ctrl input[tabindex="1001"] {
- left: 20px;
-}
-
-focus-ctrl input[tabindex="1002"] {
- left: auto;
- right: 10px;
-}
-
-focus-ctrl input:focus {
- background: red;
-}*/
diff --git a/ionic/components/menu/menu.ts b/ionic/components/menu/menu.ts
index c3bd5b3dd9..caf94842a3 100644
--- a/ionic/components/menu/menu.ts
+++ b/ionic/components/menu/menu.ts
@@ -5,6 +5,7 @@ import {IonicApp} from '../app/app';
import {IonicConfig} from '../../config/config';
import {ConfigComponent} from '../../config/decorators';
import {IonicPlatform} from '../../platform/platform';
+import {IonicKeyboard} from '../../util/keyboard';
import * as gestures from './menu-gestures';
@@ -67,11 +68,13 @@ export class Menu extends Ion {
app: IonicApp,
elementRef: ElementRef,
config: IonicConfig,
- platform: IonicPlatform
+ platform: IonicPlatform,
+ keyboard: IonicKeyboard
) {
super(elementRef, config);
this.app = app;
this.platform = platform;
+ this.keyboard = keyboard;
this.opening = new EventEmitter('opening');
this.isOpen = false;
@@ -188,6 +191,7 @@ export class Menu extends Ion {
this._disable();
this.app.setTransitioning(true);
+ this.keyboard.close();
}
_after(isOpen) {
diff --git a/ionic/components/menu/test/basic/page1.html b/ionic/components/menu/test/basic/page1.html
index 2bc5c792c5..d7372948a9 100644
--- a/ionic/components/menu/test/basic/page1.html
+++ b/ionic/components/menu/test/basic/page1.html
@@ -40,6 +40,11 @@
-
+
+
+ Username:
+
+
+
diff --git a/ionic/components/switch/switch.ts b/ionic/components/switch/switch.ts
index 2be28c6133..88e67faa89 100644
--- a/ionic/components/switch/switch.ts
+++ b/ionic/components/switch/switch.ts
@@ -1,6 +1,6 @@
import {Component, Directive, ElementRef, Renderer, Host, Optional, NgControl, Inject, forwardRef} from 'angular2/angular2';
-import {IonicForm} from '../form/form';
+import {IonicForm} from '../../util/form';
import {IonicConfig} from '../../config/config';
import {pointerCoord} from '../../util/dom';
diff --git a/ionic/components/text-input/text-input.scss b/ionic/components/text-input/text-input.scss
index 550a3d5d91..e341572096 100644
--- a/ionic/components/text-input/text-input.scss
+++ b/ionic/components/text-input/text-input.scss
@@ -8,6 +8,31 @@ $input-focus-box-shadow: inset 0px 0px 8px 0px $input-focus-border-color
$text-input-background-color: $list-background-color !default;
+ion-input {
+
+ // text inputs
+ textarea,
+ input[type="text"],
+ input[type="password"],
+ input[type="datetime"],
+ input[type="datetime-local"],
+ input[type="date"],
+ input[type="month"],
+ input[type="time"],
+ input[type="week"],
+ input[type="number"],
+ input[type="email"],
+ input[type="url"],
+ input[type="search"],
+ input[type="tel"],
+ input[type="color"] {
+ display: block;
+ background: transparent;
+ border: 0;
+ width: 100%;
+ }
+}
+
ion-input.item {
align-items: flex-start;
}
@@ -37,3 +62,22 @@ ion-input.has-focus [text-input] {
ion-input textarea {
padding-top: 9px;
}
+
+textarea {
+ margin: 0;
+ padding: 0;
+ height: auto;
+ overflow: auto;
+ font: inherit;
+ color: inherit;
+}
+
+.platform-mobile textarea {
+ resize: none;
+}
+
+input,
+textarea {
+ @include placeholder();
+}
+
diff --git a/ionic/components/text-input/text-input.ts b/ionic/components/text-input/text-input.ts
index b89fb382ba..baac463615 100644
--- a/ionic/components/text-input/text-input.ts
+++ b/ionic/components/text-input/text-input.ts
@@ -1,7 +1,7 @@
import {Directive, Host, Optional, ElementRef, Renderer, Attribute, Query, QueryList, NgZone} from 'angular2/angular2';
import {IonicConfig} from '../../config/config';
-import {IonicForm} from '../form/form';
+import {IonicForm} from '../../util/form';
import {Label} from './label';
import {IonicApp} from '../app/app';
import {Content} from '../content/content';
diff --git a/ionic/config/bootstrap.ts b/ionic/config/bootstrap.ts
index 4e1079c875..14c1389541 100644
--- a/ionic/config/bootstrap.ts
+++ b/ionic/config/bootstrap.ts
@@ -5,7 +5,8 @@ import {IonicApp} from '../components/app/app';
import {IonicConfig} from './config';
import {IonicPlatform} from '../platform/platform';
import {OverlayController} from '../components/overlay/overlay-controller';
-import {IonicForm} from '../components/form/form';
+import {IonicForm} from '../util/form';
+import {IonicKeyboard} from '../util/keyboard';
import {ActionSheet} from '../components/action-sheet/action-sheet';
import {Modal} from '../components/modal/modal';
import {Popup} from '../components/popup/popup';
@@ -47,6 +48,7 @@ export function ionicBindings(rootCmp, config) {
bind(TapClick).toValue(tapClick),
bind(Events).toValue(events),
IonicForm,
+ IonicKeyboard,
OverlayController,
ActionSheet,
Modal,
diff --git a/ionic/ionic.core.scss b/ionic/ionic.core.scss
index 612c128cdb..ca6ad490ff 100644
--- a/ionic/ionic.core.scss
+++ b/ionic/ionic.core.scss
@@ -28,7 +28,6 @@
"components/icon/icon",
"components/item/item",
"components/item/item-media",
- "components/form/form",
"components/grid/grid",
"components/text-input/text-input",
"components/text-input/label",
diff --git a/ionic/platform/platform.ts b/ionic/platform/platform.ts
index a3335126f1..708d3e05ca 100644
--- a/ionic/platform/platform.ts
+++ b/ionic/platform/platform.ts
@@ -211,34 +211,6 @@ export class IonicPlatform {
return !this.isPortrait();
}
- isKeyboardOpen() {
- return dom.hasFocusedTextInput();
- }
-
- onKeyboardClose(callback) {
- const self = this;
-
- let promise = null;
-
- if (!callback) {
- // a callback wasn't provided, so let's return a promise instead
- promise = new Promise(resolve => { callback = resolve; });
- }
-
- function checkKeyboard() {
- if (!self.isKeyboardOpen()) {
- callback();
-
- } else {
- setTimeout(checkKeyboard, 500);
- }
- }
-
- setTimeout(checkKeyboard, 100);
-
- return promise;
- }
-
windowResize() {
let self = this;
clearTimeout(self._resizeTimer);
diff --git a/ionic/components/form/form.ts b/ionic/util/form.ts
similarity index 98%
rename from ionic/components/form/form.ts
rename to ionic/util/form.ts
index ce0c856933..5c8a6015c1 100644
--- a/ionic/components/form/form.ts
+++ b/ionic/util/form.ts
@@ -1,7 +1,8 @@
import {Injectable, NgZone} from 'angular2/angular2';
-import {IonicConfig} from '../../config/config';
-import {raf} from '../../util/dom';
+import {IonicConfig} from '../config/config';
+import {raf} from './dom';
+
/**
* The Input component is used to focus text input elements.
diff --git a/ionic/util/keyboard.ts b/ionic/util/keyboard.ts
new file mode 100644
index 0000000000..5c7caea0ae
--- /dev/null
+++ b/ionic/util/keyboard.ts
@@ -0,0 +1,51 @@
+import {Injectable} from 'angular2/angular2';
+
+import {IonicForm} from './form';
+import * as dom from './dom';
+
+
+@Injectable()
+export class IonicKeyboard {
+
+ constructor(form: IonicForm) {
+ this.form = form;
+ }
+
+ isOpen() {
+ return dom.hasFocusedTextInput();
+ }
+
+ onClose(callback) {
+ const self = this;
+
+ let promise = null;
+
+ if (!callback) {
+ // a callback wasn't provided, so let's return a promise instead
+ promise = new Promise(resolve => { callback = resolve; });
+ }
+
+ function checkKeyboard() {
+ if (!self.isOpen()) {
+ callback();
+
+ } else {
+ setTimeout(checkKeyboard, 500);
+ }
+ }
+
+ setTimeout(checkKeyboard, 100);
+
+ return promise;
+ }
+
+ close() {
+ dom.raf(() => {
+ if (dom.hasFocusedTextInput()) {
+ // only focus out when a text input has focus
+ this.form.focusOut();
+ }
+ });
+ }
+
+}
diff --git a/ionic/util/util.scss b/ionic/util/util.scss
index fc3abce1cd..5b4bb3559f 100755
--- a/ionic/util/util.scss
+++ b/ionic/util/util.scss
@@ -53,6 +53,23 @@
}
+// Focus Controls
+// -------------------------------
+
+focus-ctrl {
+ position: fixed;
+
+ input,
+ button {
+ position: fixed;
+ top: 1px;
+ width: 9px;
+ left: -9999px;
+ z-index: 9999;
+ }
+}
+
+
// Backdrop
// --------------------------------------------------