Skip to content

Commit

Permalink
fix(textarea): Allow scroll in textarea when focused
Browse files Browse the repository at this point in the history 
Closes #1280
  • Loading branch information
Adam Bradley committed May 9, 2014
1 parent b0cfe23 commit 5f2fdfd
Show file tree
Hide file tree
Showing 5 changed files with 88 additions and 72 deletions.
4 changes: 3 additions & 1 deletion js/utils/keyboard.js
View file
Expand Up @@ -161,7 +161,9 @@ function keyboardOnKeyDown(e) {
}

function keyboardPreventDefault(e) {
e.preventDefault();
if( e.target.tagName !== 'TEXTAREA' ) {
e.preventDefault();
}
}

function keyboardOrientationChange() {
Expand Down
3 changes: 2 additions & 1 deletion js/views/scrollView.js
View file
Expand Up @@ -696,7 +696,8 @@ ionic.views.Scroll = ionic.views.View.inherit({
};

self.touchMove = function(e) {
if(e.defaultPrevented) {
if(e.defaultPrevented ||
(e.target.tagName === 'TEXTAREA' && e.target.parentElement.querySelector(':focus')) ) {
return;
}

Expand Down
2 changes: 1 addition & 1 deletion scss/_form.scss
View file
Expand Up @@ -146,12 +146,12 @@ textarea {
.item-stacked-label textarea
{
@include border-radius(2px);
overflow: hidden;
padding: 4px 8px 3px;
border: none;
background-color: $input-bg;
}
.item-stacked-label input {
overflow: hidden;
height: $line-height-computed + $font-size-base + 12px;
}

Expand Down
4 changes: 2 additions & 2 deletions test/css/input-textarea.html
View file
Expand Up @@ -94,7 +94,7 @@ <h3>Label left of input, No Parent Content Padding</h3>
<label class="item item-input">
<i class="icon ion-email"></i>
<span class="input-label">Email</span>
<input type="email" placeholder="your@email.com">
<textarea placeholder="your@email.com"></textarea>
</label>
</div>

Expand Down Expand Up @@ -193,7 +193,7 @@ <h3>Default Textarea, No Parent Content Padding</h3>
<div class="list">
<label class="item item-input">
<i class="icon ion-search placeholder-icon"></i>
<input type="search" placeholder="Search">
<textarea placeholder="Favorites"></textarea>
</label>
</div>

Expand Down
147 changes: 80 additions & 67 deletions test/html/input.html
View file
Expand Up @@ -68,100 +68,113 @@
<form ng-submit="formSubmit()">

<div class="list">

<label class="item item-input item-stacked-label">
<span class="input-label">Email</span>
<textarea>
Line 1
Line 2
Line 3
Line 4
Line 5
</textarea>
</label>

<label class="item item-input">
<span class="input-label">Your Name</span>
<input type="text" value="name input" id="name">
</label>

<div class="item item-checkbox">
<span class="input-label">Remember me</span>
<label class="checkbox">
<input type="checkbox" id="remember-me">
</label>
</div>
</div>

<label class="item item-input">
<span class="input-label">From 1</span>
<input type="text" value="from input" id="from1">
</label>
<label class="item item-input">
<span class="input-label">From 1</span>
<input type="text" value="from input" id="from1">
</label>

<label class="item item-input">
<span class="input-label">To 1</span>
<input type="text" value="to input" id="to1">
</label>
<label class="item item-input">
<span class="input-label">To 1</span>
<input type="text" value="to input" id="to1">
</label>

<label class="item item-input item-stacked-label">
<span class="input-label">Comment 1</span>
<textarea id="textarea" id="comment1">comment textarea</textarea>
</label>
<label class="item item-input item-stacked-label">
<span class="input-label">Comment 1</span>
<textarea id="textarea" id="comment1">comment textarea</textarea>
</label>

<label class="item item-input">
<span class="input-label">From 2</span>
<input type="text" value="" id="from2">
</label>
<label class="item item-input">
<span class="input-label">From 2</span>
<input type="text" value="" id="from2">
</label>

<label class="item item-input">
<span class="input-label">To 2</span>
<input type="text" value="" id="to2">
</label>
<label class="item item-input">
<span class="input-label">To 2</span>
<input type="text" value="" id="to2">
</label>

<label class="item item-input item-stacked-label">
<span class="input-label">Comment 2</span>
<textarea id="textarea" id="comment2"></textarea>
</label>
<label class="item item-input item-stacked-label">
<span class="input-label">Comment 2</span>
<textarea id="textarea" id="comment2"></textarea>
</label>

<label class="item item-input">
<span class="input-label">From 3</span>
<input type="text" value="">
</label>
<label class="item item-input">
<span class="input-label">From 3</span>
<input type="text" value="">
</label>

<label class="item item-input">
<span class="input-label">To 3</span>
<input type="text" value="">
</label>
<label class="item item-input">
<span class="input-label">To 3</span>
<input type="text" value="">
</label>

<label class="item item-input item-stacked-label">
<span class="input-label">Comment 3</span>
<textarea id="textarea"></textarea>
</label>
<label class="item item-input item-stacked-label">
<span class="input-label">Comment 3</span>
<textarea id="textarea"></textarea>
</label>

<label class="item item-input">
<span class="input-label">From 4</span>
<input type="text" value="">
</label>
<label class="item item-input">
<span class="input-label">From 4</span>
<input type="text" value="">
</label>

<label class="item item-input">
<span class="input-label">To 4</span>
<input type="text" value="">
</label>
<label class="item item-input">
<span class="input-label">To 4</span>
<input type="text" value="">
</label>

<label class="item item-input item-stacked-label">
<span class="input-label">Comment 4</span>
<textarea id="textarea"></textarea>
</label>
<label class="item item-input item-stacked-label">
<span class="input-label">Comment 4</span>
<textarea id="textarea"></textarea>
</label>

<label class="item item-input">
<span class="input-label">From 5</span>
<input type="text" value="">
</label>
<label class="item item-input">
<span class="input-label">From 5</span>
<input type="text" value="">
</label>

<label class="item item-input">
<span class="input-label">To 5</span>
<input type="text" value="">
</label>
<label class="item item-input">
<span class="input-label">To 5</span>
<input type="text" value="">
</label>

<label class="item item-input item-stacked-label">
<span class="input-label">Comment 5</span>
<textarea id="textarea"></textarea>
</label>
<label class="item item-input item-stacked-label">
<span class="input-label">Comment 5</span>
<textarea id="textarea"></textarea>
</label>

<button type="button" class="button button-block button-energized" ng-click="openModal()">
Open Modal
</button>
<button type="button" class="button button-block button-energized" ng-click="openModal()">
Open Modal
</button>

<button type="submit" class="button button-block button-calm">
Submit!
</button>
<button type="submit" class="button button-block button-calm">
Submit!
</button>
</div>

</form>

Expand Down

0 comments on commit 5f2fdfd

Please sign in to comment.