Skip to content

Commit 5f2fdfd

Browse files
author
Adam Bradley
committed
fix(textarea): Allow scroll in textarea when focused
Closes #1280
1 parent b0cfe23 commit 5f2fdfd

File tree

5 files changed

+88
-72
lines changed

5 files changed

+88
-72
lines changed

‎js/utils/keyboard.js

+3-1
Original file line numberDiff line numberDiff line change
@@ -161,7 +161,9 @@ function keyboardOnKeyDown(e) {
161161
}
162162

163163
function keyboardPreventDefault(e) {
164-
e.preventDefault();
164+
if( e.target.tagName !== 'TEXTAREA' ) {
165+
e.preventDefault();
166+
}
165167
}
166168

167169
function keyboardOrientationChange() {

‎js/views/scrollView.js

+2-1
Original file line numberDiff line numberDiff line change
@@ -696,7 +696,8 @@ ionic.views.Scroll = ionic.views.View.inherit({
696696
};
697697

698698
self.touchMove = function(e) {
699-
if(e.defaultPrevented) {
699+
if(e.defaultPrevented ||
700+
(e.target.tagName === 'TEXTAREA' && e.target.parentElement.querySelector(':focus')) ) {
700701
return;
701702
}
702703

‎scss/_form.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -146,12 +146,12 @@ textarea {
146146
.item-stacked-label textarea
147147
{
148148
@include border-radius(2px);
149-
overflow: hidden;
150149
padding: 4px 8px 3px;
151150
border: none;
152151
background-color: $input-bg;
153152
}
154153
.item-stacked-label input {
154+
overflow: hidden;
155155
height: $line-height-computed + $font-size-base + 12px;
156156
}
157157

‎test/css/input-textarea.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -94,7 +94,7 @@ <h3>Label left of input, No Parent Content Padding</h3>
9494
<label class="item item-input">
9595
<i class="icon ion-email"></i>
9696
<span class="input-label">Email</span>
97-
<input type="email" placeholder="[email protected]">
97+
<textarea placeholder="[email protected]"></textarea>
9898
</label>
9999
</div>
100100

@@ -193,7 +193,7 @@ <h3>Default Textarea, No Parent Content Padding</h3>
193193
<div class="list">
194194
<label class="item item-input">
195195
<i class="icon ion-search placeholder-icon"></i>
196-
<input type="search" placeholder="Search">
196+
<textarea placeholder="Favorites"></textarea>
197197
</label>
198198
</div>
199199

‎test/html/input.html

+80-67
Original file line numberDiff line numberDiff line change
@@ -68,100 +68,113 @@
6868
<form ng-submit="formSubmit()">
6969

7070
<div class="list">
71+
72+
<label class="item item-input item-stacked-label">
73+
<span class="input-label">Email</span>
74+
<textarea>
75+
Line 1
76+
Line 2
77+
Line 3
78+
Line 4
79+
Line 5
80+
</textarea>
81+
</label>
82+
7183
<label class="item item-input">
7284
<span class="input-label">Your Name</span>
7385
<input type="text" value="name input" id="name">
7486
</label>
87+
7588
<div class="item item-checkbox">
7689
<span class="input-label">Remember me</span>
7790
<label class="checkbox">
7891
<input type="checkbox" id="remember-me">
7992
</label>
8093
</div>
81-
</div>
8294

83-
<label class="item item-input">
84-
<span class="input-label">From 1</span>
85-
<input type="text" value="from input" id="from1">
86-
</label>
95+
<label class="item item-input">
96+
<span class="input-label">From 1</span>
97+
<input type="text" value="from input" id="from1">
98+
</label>
8799

88-
<label class="item item-input">
89-
<span class="input-label">To 1</span>
90-
<input type="text" value="to input" id="to1">
91-
</label>
100+
<label class="item item-input">
101+
<span class="input-label">To 1</span>
102+
<input type="text" value="to input" id="to1">
103+
</label>
92104

93-
<label class="item item-input item-stacked-label">
94-
<span class="input-label">Comment 1</span>
95-
<textarea id="textarea" id="comment1">comment textarea</textarea>
96-
</label>
105+
<label class="item item-input item-stacked-label">
106+
<span class="input-label">Comment 1</span>
107+
<textarea id="textarea" id="comment1">comment textarea</textarea>
108+
</label>
97109

98-
<label class="item item-input">
99-
<span class="input-label">From 2</span>
100-
<input type="text" value="" id="from2">
101-
</label>
110+
<label class="item item-input">
111+
<span class="input-label">From 2</span>
112+
<input type="text" value="" id="from2">
113+
</label>
102114

103-
<label class="item item-input">
104-
<span class="input-label">To 2</span>
105-
<input type="text" value="" id="to2">
106-
</label>
115+
<label class="item item-input">
116+
<span class="input-label">To 2</span>
117+
<input type="text" value="" id="to2">
118+
</label>
107119

108-
<label class="item item-input item-stacked-label">
109-
<span class="input-label">Comment 2</span>
110-
<textarea id="textarea" id="comment2"></textarea>
111-
</label>
120+
<label class="item item-input item-stacked-label">
121+
<span class="input-label">Comment 2</span>
122+
<textarea id="textarea" id="comment2"></textarea>
123+
</label>
112124

113-
<label class="item item-input">
114-
<span class="input-label">From 3</span>
115-
<input type="text" value="">
116-
</label>
125+
<label class="item item-input">
126+
<span class="input-label">From 3</span>
127+
<input type="text" value="">
128+
</label>
117129

118-
<label class="item item-input">
119-
<span class="input-label">To 3</span>
120-
<input type="text" value="">
121-
</label>
130+
<label class="item item-input">
131+
<span class="input-label">To 3</span>
132+
<input type="text" value="">
133+
</label>
122134

123-
<label class="item item-input item-stacked-label">
124-
<span class="input-label">Comment 3</span>
125-
<textarea id="textarea"></textarea>
126-
</label>
135+
<label class="item item-input item-stacked-label">
136+
<span class="input-label">Comment 3</span>
137+
<textarea id="textarea"></textarea>
138+
</label>
127139

128-
<label class="item item-input">
129-
<span class="input-label">From 4</span>
130-
<input type="text" value="">
131-
</label>
140+
<label class="item item-input">
141+
<span class="input-label">From 4</span>
142+
<input type="text" value="">
143+
</label>
132144

133-
<label class="item item-input">
134-
<span class="input-label">To 4</span>
135-
<input type="text" value="">
136-
</label>
145+
<label class="item item-input">
146+
<span class="input-label">To 4</span>
147+
<input type="text" value="">
148+
</label>
137149

138-
<label class="item item-input item-stacked-label">
139-
<span class="input-label">Comment 4</span>
140-
<textarea id="textarea"></textarea>
141-
</label>
150+
<label class="item item-input item-stacked-label">
151+
<span class="input-label">Comment 4</span>
152+
<textarea id="textarea"></textarea>
153+
</label>
142154

143-
<label class="item item-input">
144-
<span class="input-label">From 5</span>
145-
<input type="text" value="">
146-
</label>
155+
<label class="item item-input">
156+
<span class="input-label">From 5</span>
157+
<input type="text" value="">
158+
</label>
147159

148-
<label class="item item-input">
149-
<span class="input-label">To 5</span>
150-
<input type="text" value="">
151-
</label>
160+
<label class="item item-input">
161+
<span class="input-label">To 5</span>
162+
<input type="text" value="">
163+
</label>
152164

153-
<label class="item item-input item-stacked-label">
154-
<span class="input-label">Comment 5</span>
155-
<textarea id="textarea"></textarea>
156-
</label>
165+
<label class="item item-input item-stacked-label">
166+
<span class="input-label">Comment 5</span>
167+
<textarea id="textarea"></textarea>
168+
</label>
157169

158-
<button type="button" class="button button-block button-energized" ng-click="openModal()">
159-
Open Modal
160-
</button>
170+
<button type="button" class="button button-block button-energized" ng-click="openModal()">
171+
Open Modal
172+
</button>
161173

162-
<button type="submit" class="button button-block button-calm">
163-
Submit!
164-
</button>
174+
<button type="submit" class="button button-block button-calm">
175+
Submit!
176+
</button>
177+
</div>
165178

166179
</form>
167180

0 commit comments

Comments
 (0)