Improve Textarea Behavior #4845
Conversation
| textarea.addEventListener('keydown', function(event) { | ||
| if (event.key === 'Enter') { | ||
| const currentCursorPosition = textarea.selectionStart; | ||
| const textBeforeCursor = textarea.value.substring(0, currentCursorPosition); | ||
| const textAfterCursor = textarea.value.substring(currentCursorPosition); | ||
|
|
||
| const newTextValue = textBeforeCursor + '\n' + textAfterCursor; | ||
| textarea.value = newTextValue; | ||
|
|
||
| const newCursorPosition = currentCursorPosition + 1; | ||
| textarea.setSelectionRange(newCursorPosition, newCursorPosition); | ||
|
|
||
| autogrowFn(); | ||
| } | ||
| }); |
There was a problem hiding this comment.
This doubles the new lines and seems unnecessary.
Or maybe I haven't found the steps to reproduce what it is supposed to fix. 🤷♂️
There was a problem hiding this comment.
When we add a new line in the text area the text jumps to the top of the screen, it is supposed to fix that.
2023-10-06.17-22-22.mp4
There was a problem hiding this comment.
It doesn't jump without keydown in Chrome and Firefox. 🤷♂️
UPD:
Ahh, after pasting a big wall of text it starts jumping.
There was a problem hiding this comment.
Writing by memory
if ((textarea.scrollHeight - offset) > self.maxAllowedHeight) {
textarea.style.overflowY = 'scroll';
newHeight = self.maxAllowedHeight;
} else {
textarea.style.overflowY = 'hidden';
stub.style.height = textarea.style.height;
textarea.style.height = 'auto'; // to shrink the textarea
newHeight = textarea.scrollHeight;
}
textarea.style.height = newHeight + 'px';
stub.style.height = '0px'; // here is an error in the reference commentThere was a problem hiding this comment.
still getting the jumping problem
There was a problem hiding this comment.
still getting the jumping problem
On shrinking (deleting text) or on growing (adding text)?
The stub hack is for shrinking. I tried with your keydown hack.
There was a problem hiding this comment.
I have this change with the current state of your branch.
diff --git a/src/elements/emby-textarea/emby-textarea.js b/src/elements/emby-textarea/emby-textarea.js
index 80e79e115..3189cc22f 100644
--- a/src/elements/emby-textarea/emby-textarea.js
+++ b/src/elements/emby-textarea/emby-textarea.js
@@ -19,7 +19,7 @@ function calculateOffset(textarea) {
return offset;
}
-function AutoGrow(textarea, maxLines) {
+function AutoGrow(textarea, stub, maxLines) {
const self = this;
if (maxLines === undefined) {
@@ -52,19 +52,17 @@ function AutoGrow(textarea, maxLines) {
newHeight = self.maxAllowedHeight;
} else {
textarea.style.overflowY = 'hidden';
- // textarea.style.height = 'auto';
+ stub.style.height = textarea.style.height;
+ textarea.style.height = 'auto';
newHeight = textarea.scrollHeight/* - offset*/;
}
textarea.style.height = newHeight + 'px';
+ stub.style.height = '0px';
}
// Call autogrowFn() when textarea's value is changed
textarea.addEventListener('input', autogrowFn);
textarea.addEventListener('focus', autogrowFn);
- textarea.addEventListener('blur', () => {
- textarea.style.height = 'auto';
- autogrowFn();
- });
textarea.addEventListener('valueset', autogrowFn);
textarea.addEventListener('keydown', function(event) {
if (event.key === 'Enter') {
@@ -132,6 +130,9 @@ EmbyTextAreaPrototype.attachedCallback = function () {
label.htmlFor = this.id;
parentNode.insertBefore(label, this);
+ const stub = this.ownerDocument.createElement('div');
+ parentNode.insertBefore(stub, this.nextSibling);
+
this.addEventListener('focus', function () {
label.classList.add('textareaLabelFocused');
label.classList.remove('textareaLabelUnfocused');
@@ -145,7 +146,7 @@ EmbyTextAreaPrototype.attachedCallback = function () {
label.innerText = text;
};
- new AutoGrow(this);
+ new AutoGrow(this, stub);
};
document.registerElement('emby-textarea', {But I noticed that the focus doesn't follow the cursor on Enter, when it is at the bottom of the window.
Also, the cursor can hide under the top bar. But this is another story.
dmitrylyzo
added
enhancement
…02/jellyfin-web into textarea-improvements
Cloudflare Pages deployment
|
|
Kudos, SonarCloud Quality Gate passed!
|
Changes
This PR addresses issues related to the custom textarea behavior:
Issues
Fixes #4740