feat: adds autofocus to Input field (#570)

# Motivation

We want to be able to set `focus` on the `Input` component. Since
enabling `autofocus` is not recommended, we aim to make it possible to
bind the input element. This way, we can set the focus programmaticcly
and improve the user experience of our application.

# Changes

- enables to set focus on `Input` component

---------

Co-authored-by: github-actions <41898282+github-actions[bot]@users.noreply.github.com>

Author: BonomoAlessandro

src/lib/components/Input.svelte

@@ -15,6 +15,7 @@
   export let testId: string | undefined = undefined;
   export let decimals = 8;
   export let ignore1Password = true;
+  export let inputElement: HTMLInputElement | undefined = undefined;
 
   const dispatch = createEventDispatcher();
 
@@ -29,8 +30,6 @@
   // showInfo = $$slots.label || $$slots.end
   export let showInfo = true;
 
-  let inputElement: HTMLInputElement | undefined;
-
   $: step = inputType === "number" ? (step ?? "any") : undefined;
   $: autocomplete =
     inputType !== "number" ? (autocomplete ?? "off") : undefined;

src/routes/(split)/components/input/+page.md

@@ -34,6 +34,7 @@ The input component is a wrapper to the HTML input element with custom styling a
 | `showInfo`        | Display additional information related to the input. Should be used in addition to slots.                                                             | `boolean`                                 | `false`     |
 | `testId`          | Add a `data-tid` attribute to the DOM, useful for test purpose.                                                                                       | `string` or `undefined`                   | `undefined` |
 | `ignore1Password` | Tell 1Password it should ignore the field (Reference: 1Password [documentation](https://developer.1password.com/docs/web/compatible-website-design/)) | `boolean`                                 | `true`      |
+| `inputElement`    | HTML input element                                                                                                                                    | `HTMLInputElement` or `undefined`         | `undefined` |
 
 ### Notes
 

src/tests/lib/components/Input.spec.ts

@@ -2,6 +2,7 @@ import Input from "$lib/components/Input.svelte";
 import { assertNonNullish, isNullish, nonNullish } from "@dfinity/utils";
 import { fireEvent, render } from "@testing-library/svelte";
 import { tick } from "svelte";
+import InputElementTest from "./InputElementTest.svelte";
 import InputTest from "./InputTest.svelte";
 import InputValueTest from "./InputValueTest.svelte";
 
@@ -538,4 +539,18 @@ describe("Input", () => {
         });
       }));
   });
+
+  it("should bind input element", async () => {
+    const { container } = render(InputElementTest, {
+      props,
+    });
+
+    const input: HTMLInputElement | null = container.querySelector("input");
+    expect(input === document.activeElement).toBe(false);
+
+    const testBind: HTMLButtonElement | null = container.querySelector("#test");
+    testBind && testBind.click();
+
+    expect(input === document.activeElement).toBe(true);
+  });
 });

src/tests/lib/components/InputElementTest.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+  import Input from "$lib/components/Input.svelte";
+
+  export let name: string;
+  export let placeholder = "test.placeholder";
+
+  let inputField: HTMLInputElement | undefined;
+
+  const changeFocus = () => {
+    inputField.focus();
+  };
+</script>
+
+<button on:click={changeFocus} id="test" />
+
+<Input bind:inputElement={inputField} {name} {placeholder} />