Spaces:
Running
Running
Adrien Denat
commited on
Fix textarea submit not working on Safari <16 (#9)
Browse files* fix textarea not submitting on "enter" on Safari <16
* fix flick on page load on textarea
src/lib/components/chat/ChatInput.svelte
CHANGED
|
@@ -1,19 +1,22 @@
|
|
| 1 |
<script lang="ts">
|
|
|
|
|
|
|
| 2 |
export let value = '';
|
| 3 |
export let minRows = 1;
|
| 4 |
export let maxRows: null | number = null;
|
| 5 |
export let placeholder = '';
|
| 6 |
export let autofocus = false;
|
| 7 |
|
|
|
|
|
|
|
| 8 |
$: minHeight = `${1 + minRows * 1.5}em`;
|
| 9 |
$: maxHeight = maxRows ? `${1 + maxRows * 1.5}em` : `auto`;
|
| 10 |
|
| 11 |
function handleKeydown(event: KeyboardEvent) {
|
| 12 |
// submit on enter
|
| 13 |
if (event.key === 'Enter' && !event.shiftKey) {
|
|
|
|
| 14 |
event.preventDefault();
|
| 15 |
-
// @ts-ignore - requestSubmit is not in the DOM typings
|
| 16 |
-
event.target?.form?.requestSubmit();
|
| 17 |
}
|
| 18 |
}
|
| 19 |
</script>
|
|
@@ -22,7 +25,7 @@
|
|
| 22 |
<pre
|
| 23 |
class="invisible py-3"
|
| 24 |
aria-hidden="true"
|
| 25 |
-
style="min-height: {minHeight}; max-height: {maxHeight}">{value + '
|
| 26 |
|
| 27 |
<textarea
|
| 28 |
tabindex="0"
|
|
|
|
| 1 |
<script lang="ts">
|
| 2 |
+
import { createEventDispatcher } from 'svelte';
|
| 3 |
+
|
| 4 |
export let value = '';
|
| 5 |
export let minRows = 1;
|
| 6 |
export let maxRows: null | number = null;
|
| 7 |
export let placeholder = '';
|
| 8 |
export let autofocus = false;
|
| 9 |
|
| 10 |
+
const dispatch = createEventDispatcher();
|
| 11 |
+
|
| 12 |
$: minHeight = `${1 + minRows * 1.5}em`;
|
| 13 |
$: maxHeight = maxRows ? `${1 + maxRows * 1.5}em` : `auto`;
|
| 14 |
|
| 15 |
function handleKeydown(event: KeyboardEvent) {
|
| 16 |
// submit on enter
|
| 17 |
if (event.key === 'Enter' && !event.shiftKey) {
|
| 18 |
+
dispatch('submit');
|
| 19 |
event.preventDefault();
|
|
|
|
|
|
|
| 20 |
}
|
| 21 |
}
|
| 22 |
</script>
|
|
|
|
| 25 |
<pre
|
| 26 |
class="invisible py-3"
|
| 27 |
aria-hidden="true"
|
| 28 |
+
style="min-height: {minHeight}; max-height: {maxHeight}">{value + ' \n'}</pre>
|
| 29 |
|
| 30 |
<textarea
|
| 31 |
tabindex="0"
|