developmentseed / developmentseed/bones-document

Markdown autoresize box quirky on enter

Open
#8 0 comments 0 reactions 0 assignees View on GitHub
Dominant language
JavaScript
Stars
4
Forks
2
PR merge metrics
No merged PRs in 30d

Description

When hitting enter in a markdown autoresize textarea, the textarea is not resized until the enter key is released which leads to the text jumping up one line before it drops down again. I have observed this behavior in Chrome and FF. While the browser adds the new character to the textarea, it does not make it available via `.val()` until the key is released.

The following code is hideous, but addresses the issue. I wonder whether there are more elegante ways around this.

```
diff --git a/models/Document.bones b/models/Document.bones
index 23c2044..6f5bec9 100644
--- a/models/Document.bones
+++ b/models/Document.bones
@@ -202,9 +202,14 @@ model = Backbone.Model.extend({
letterSpacing: textarea.css('letterSpacing')
}).attr('tabIndex','-1').insertBefore(textarea);
})(),
- updateSize = function() {
+ updateSize = function(ev) {
// Update clone.
- clone.val($(this).val()).scrollTop(10000);
+ var val = $(this).val();
+ On keydown, the newest character is not in .val().
+ if (ev && ev.type == 'keydown') {
+ val += String.fromCharCode(ev.keyCode);
+ }
+ clone.val(val).scrollTop(10000);
// Find scrolling height of text in clone and update
var height = clone.scrollTop();
if (!$.browser.msie) {
```

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.