Adrien Denat commited on
Commit
5b9c242
1 Parent(s): c8d90f4

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 + '\n'}</pre>
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 + '&nbsp;\n'}</pre>
29
 
30
  <textarea
31
  tabindex="0"