Fix chat input on mobile
This commit is contained in:
parent
53b4865de1
commit
9ac14fc428
1 changed files with 8 additions and 1 deletions
|
|
@ -24,14 +24,20 @@ export const autogrow: Action<
|
||||||
const vPad = parseFloat(cs.paddingTop) + parseFloat(cs.paddingBottom);
|
const vPad = parseFloat(cs.paddingTop) + parseFloat(cs.paddingBottom);
|
||||||
const vBorder =
|
const vBorder =
|
||||||
parseFloat(cs.borderTopWidth) + parseFloat(cs.borderBottomWidth);
|
parseFloat(cs.borderTopWidth) + parseFloat(cs.borderBottomWidth);
|
||||||
|
const min = lh * Math.max(node.rows, 1) + vPad + vBorder;
|
||||||
const max = lh * maxRows + vPad + vBorder;
|
const max = lh * maxRows + vPad + vBorder;
|
||||||
node.style.height = "auto";
|
node.style.height = "auto";
|
||||||
const next = Math.min(node.scrollHeight, max);
|
// scrollHeight is 0 while hidden (display:none); never go below `rows`.
|
||||||
|
const next = Math.min(Math.max(node.scrollHeight, min), max);
|
||||||
node.style.height = `${next}px`;
|
node.style.height = `${next}px`;
|
||||||
node.style.overflowY = node.scrollHeight > max ? "auto" : "hidden";
|
node.style.overflowY = node.scrollHeight > max ? "auto" : "hidden";
|
||||||
}
|
}
|
||||||
|
|
||||||
node.addEventListener("input", resize);
|
node.addEventListener("input", resize);
|
||||||
|
// Re-measure when the textarea becomes visible or changes width.
|
||||||
|
const ro =
|
||||||
|
typeof ResizeObserver !== "undefined" ? new ResizeObserver(resize) : null;
|
||||||
|
ro?.observe(node);
|
||||||
resize();
|
resize();
|
||||||
|
|
||||||
return {
|
return {
|
||||||
|
|
@ -43,6 +49,7 @@ export const autogrow: Action<
|
||||||
},
|
},
|
||||||
destroy() {
|
destroy() {
|
||||||
node.removeEventListener("input", resize);
|
node.removeEventListener("input", resize);
|
||||||
|
ro?.disconnect();
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
};
|
};
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue