Clear the correct button when right-clicking

src/components/keypad/index.spec.ts

@@ -423,7 +423,7 @@ describe('Component', () => {
     }
   });
 
-  it('should clear a number if right clicked', async () => {
+  it('should delete a number if right clicked', async () => {
     const buttons = [
       { number: '0', button: zeroButton },
       { number: '1', button: oneButton },
@@ -446,6 +446,18 @@ describe('Component', () => {
     }
   });
 
+  it('should delete a number if right clicked out of sequence', async () => {
+    await fireEvent.click(oneButton);
+    await fireEvent.click(twoButton);
+    await fireEvent.click(threeButton);
+
+    expect(display.textContent).toBe(`123*`);
+
+    await fireEvent.contextMenu(twoButton);
+
+    expect(display.textContent).toBe(`13**`);
+  });
+
   it('should delete a digit when Backspace is typed', async () => {
     await fireEvent.keyDown(document.body, { key: '1' });
     expect(display.textContent).toBe('1***');

src/components/keypad/index.svelte

@@ -197,6 +197,18 @@
     params.delete('code');
     window.history.replaceState({}, '', `${location.pathname}?${params}`);
   };
+
+  const clearNumber = (number: number) => {
+    toggleButton(number.toString());
+    pressedNumbers.update((numbers) => numbers.filter((n) => n !== number));
+
+    combinations = [];
+    currentCombination = 0;
+
+    if ($pressedNumbers.length === 0) {
+      clearKeyPad();
+    }
+  };
 </script>
 
 <div class="atm-keypad">
@@ -222,7 +234,7 @@
     {#each [[1, 2, 3], [4, 5, 6], [7, 8, 9]] as row}
       <div class="row">
         {#each row as number}
-          <NumberKey {number} {onKeypadInput} />
+          <NumberKey {number} {onKeypadInput} {clearNumber} />
         {/each}
       </div>
     {/each}
@@ -234,7 +246,7 @@
       >
         <CrossIcon />
       </button>
-      <NumberKey number="{0}" {onKeypadInput} />
+      <NumberKey number="{0}" {onKeypadInput} {clearNumber} />
       <button
         class="btn green"
         on:click="{() => onKeypadInput('OK')}"

src/components/keypad/number/index.svelte

@@ -1,13 +1,14 @@
 <script lang="ts">
   export let number = 0;
   export let onKeypadInput: (input: string) => void = () => {};
+  export let clearNumber: (input: number) => void = () => {};
 </script>
 
 <button
   class="btn"
   data-value="{number}"
   on:click="{() => onKeypadInput(number.toString())}"
-  on:contextmenu|preventDefault="{() => onKeypadInput('Backspace')}"
+  on:contextmenu|preventDefault="{() => clearNumber(number)}"
 >
   {number}
 </button>