Spaces:
Sleeping
Sleeping
Adrien Denat
commited on
Commit
•
44834c9
1
Parent(s):
5ed4c3b
only apply autofocus on desktop viewport sizes (#183)
Browse files* only apply autofocus on desktop viewport sizes
* use onMount instead of reactive statement so callback doesn't trigger on resize event
* remove dead comment
src/lib/components/chat/ChatInput.svelte
CHANGED
@@ -1,12 +1,17 @@
|
|
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 disabled = false;
|
9 |
-
|
|
|
|
|
|
|
|
|
|
|
10 |
|
11 |
const dispatch = createEventDispatcher<{ submit: void }>();
|
12 |
|
@@ -21,16 +26,21 @@
|
|
21 |
}
|
22 |
}
|
23 |
|
24 |
-
|
|
|
|
|
|
|
|
|
25 |
</script>
|
26 |
|
|
|
|
|
27 |
<div class="relative min-w-0 flex-1">
|
28 |
<pre
|
29 |
class="invisible whitespace-pre-wrap p-3"
|
30 |
aria-hidden="true"
|
31 |
-
style="min-height: {minHeight}; max-height: {maxHeight}">{value + "\n"}</pre>
|
32 |
|
33 |
-
<!-- svelte-ignore a11y-autofocus -->
|
34 |
<textarea
|
35 |
enterkeyhint="send"
|
36 |
tabindex="0"
|
@@ -41,7 +51,6 @@
|
|
41 |
{disabled}
|
42 |
on:keydown={handleKeydown}
|
43 |
{placeholder}
|
44 |
-
{autofocus}
|
45 |
/>
|
46 |
</div>
|
47 |
|
|
|
1 |
<script lang="ts">
|
2 |
+
import { createEventDispatcher, onMount } 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 disabled = false;
|
9 |
+
|
10 |
+
// Approximate width from which we disable autofocus
|
11 |
+
const TABLET_VIEWPORT_WIDTH = 768;
|
12 |
+
|
13 |
+
let innerWidth = 0;
|
14 |
+
let textareaElement: HTMLTextAreaElement;
|
15 |
|
16 |
const dispatch = createEventDispatcher<{ submit: void }>();
|
17 |
|
|
|
26 |
}
|
27 |
}
|
28 |
|
29 |
+
onMount(() => {
|
30 |
+
if (innerWidth > TABLET_VIEWPORT_WIDTH) {
|
31 |
+
textareaElement.focus();
|
32 |
+
}
|
33 |
+
});
|
34 |
</script>
|
35 |
|
36 |
+
<svelte:window bind:innerWidth />
|
37 |
+
|
38 |
<div class="relative min-w-0 flex-1">
|
39 |
<pre
|
40 |
class="invisible whitespace-pre-wrap p-3"
|
41 |
aria-hidden="true"
|
42 |
+
style="min-height: {minHeight}; max-height: {maxHeight}">{(value || " ") + "\n"}</pre>
|
43 |
|
|
|
44 |
<textarea
|
45 |
enterkeyhint="send"
|
46 |
tabindex="0"
|
|
|
51 |
{disabled}
|
52 |
on:keydown={handleKeydown}
|
53 |
{placeholder}
|
|
|
54 |
/>
|
55 |
</div>
|
56 |
|
src/lib/components/chat/ChatWindow.svelte
CHANGED
@@ -65,7 +65,6 @@
|
|
65 |
placeholder="Ask anything"
|
66 |
bind:value={message}
|
67 |
on:submit={handleSubmit}
|
68 |
-
autofocus
|
69 |
maxRows={4}
|
70 |
/>
|
71 |
<button
|
|
|
65 |
placeholder="Ask anything"
|
66 |
bind:value={message}
|
67 |
on:submit={handleSubmit}
|
|
|
68 |
maxRows={4}
|
69 |
/>
|
70 |
<button
|