feat: added keyboard lookup

Author: sstefdev

packages/create-invoice-form/src/lib/create-invoice-form.svelte

@@ -23,7 +23,7 @@
   import Button from "@requestnetwork/shared-components/button.svelte";
   import Status from "@requestnetwork/shared-components/status.svelte";
   import Modal from "@requestnetwork/shared-components/modal.svelte";
-  import { EncryptionTypes, CipherProviderTypes } from '@requestnetwork/types';
+  import { EncryptionTypes, CipherProviderTypes } from "@requestnetwork/types";
 
   export let config: IConfig;
   export let wagmiConfig: WagmiConfig;
@@ -115,7 +115,7 @@
     totalAmount: 0,
   };
 
-  $: cipherProvider = requestNetwork?.getCipherProvider();
+  $: cipherProvider = undefined;
 
   $: {
     if (wagmiConfig) {
@@ -188,7 +188,7 @@
       try {
         addToStatus(APP_STATUS.PERSISTING_TO_IPFS);
         let request;
-        if(cipherProvider && formData.isEncrypted) {
+        if (cipherProvider && formData.isEncrypted) {
           const payeeEncryptionParams = {
             key: requestCreateParameters.requestInfo.payee?.value!,
             method: EncryptionTypes.METHOD.KMS,
@@ -205,7 +205,7 @@
               paymentNetwork: requestCreateParameters.paymentNetwork,
               contentData: requestCreateParameters.contentData,
             },
-            [payeeEncryptionParams, payerEncryptionParams],
+            [payeeEncryptionParams, payerEncryptionParams]
           );
         } else {
           request = await requestNetwork.createRequest({

packages/create-invoice-form/src/lib/invoice/form.svelte

@@ -568,6 +568,19 @@
         </tbody>
       </table>
     </div>
+    <div class="flex justify-between invoice-form-table-body-add-item">
+      <Button
+        text="Add Item"
+        type="button"
+        onClick={() => {
+          addInvoiceItem();
+        }}
+      >
+        <div slot="icon">
+          <Plus />
+        </div>
+      </Button>
+    </div>
     <div class="invoice-form-dates">
       <Input
         id="issuedOn"
@@ -587,19 +600,7 @@
         {handleInput}
       />
     </div>
-    <div class="flex justify-between invoice-form-table-body-add-item">
-      <Button
-        text="Add Item"
-        type="button"
-        onClick={() => {
-          addInvoiceItem();
-        }}
-      >
-        <div slot="icon">
-          <Plus />
-        </div>
-      </Button>
-    </div>
+
     <div class="invoice-form-label-wrapper">
       <Input
         max={200}
@@ -643,7 +644,7 @@
     box-shadow: 0 4px 4px rgba(0, 0, 0, 0.06);
     gap: 20px;
     box-sizing: border-box;
-    min-width: 700px;
+    min-width: 760px;
   }
 
   .invoice-form-container {

shared/components/searchable-dropdown.svelte

@@ -11,6 +11,8 @@
   let searchTerm = "";
   let isOpen = false;
   let filteredItems: any[] = [];
+  let selectedIndex = -1;
+  let dropdownElement: HTMLDivElement;
 
   $: filteredItems = searchTerm
     ? items.filter((item) => {
@@ -24,6 +26,54 @@
         );
       })
     : items;
+
+  function handleKeydown(event: KeyboardEvent) {
+    if (!isOpen) return;
+
+    switch (event.key) {
+      case "ArrowDown":
+        event.preventDefault();
+        selectedIndex = Math.min(selectedIndex + 1, filteredItems.length - 1);
+        scrollSelectedIntoView();
+        break;
+      case "ArrowUp":
+        event.preventDefault();
+        selectedIndex = Math.max(selectedIndex - 1, -1);
+        scrollSelectedIntoView();
+        break;
+      case "Enter":
+        event.preventDefault();
+        if (selectedIndex >= 0 && selectedIndex < filteredItems.length) {
+          selectItem(filteredItems[selectedIndex]);
+        }
+        break;
+      case "Escape":
+        event.preventDefault();
+        isOpen = false;
+        selectedIndex = -1;
+        break;
+    }
+  }
+
+  function scrollSelectedIntoView() {
+    if (dropdownElement && selectedIndex >= 0) {
+      const selectedElement = dropdownElement.children[
+        selectedIndex
+      ] as HTMLElement;
+      if (selectedElement) {
+        selectedElement.scrollIntoView({ block: "nearest" });
+      }
+    }
+  }
+
+  function selectItem(item: any) {
+    onSelect(item.value);
+    searchTerm = getValue(item);
+    isOpen = false;
+    selectedIndex = -1;
+  }
+
+  $: if (!isOpen) selectedIndex = -1;
 </script>
 
 {#if isOpen && !disabled}
@@ -37,6 +87,7 @@
       {placeholder}
       bind:value={searchTerm}
       on:focus={() => !disabled && (isOpen = true)}
+      on:keydown={handleKeydown}
       {disabled}
     />
     <svg
@@ -55,15 +106,13 @@
     </svg>
   </div>
   {#if isOpen && !disabled}
-    <div class="dropdown-list">
-      {#each filteredItems as item}
+    <div class="dropdown-list" bind:this={dropdownElement}>
+      {#each filteredItems as item, index}
         <div
           class="dropdown-item"
-          on:click={() => {
-            onSelect(item.value);
-            searchTerm = getValue(item);
-            isOpen = false;
-          }}
+          class:selected={index === selectedIndex}
+          on:click={() => selectItem(item)}
+          on:mouseenter={() => (selectedIndex = index)}
         >
           {#if item.type === "network"}
             <Network network={item.value} showLabel={false} />
@@ -163,4 +212,8 @@
     pointer-events: none;
     z-index: 1;
   }
+
+  .dropdown-item.selected {
+    background-color: #f0f0f0;
+  }
 </style>