fix(InputMasked): correct cursor position when navigating using keybo…

…ard (#3160)

If you are tabbing into an `InputMasked` field which is partially filled
and then uses your keyboard to un-select it by clicking your right arrow
key, your input is ignored.

**Steps to reproduce:**

1. Partially fill an InputMasked field
2. Tab out of the field (Click <kbd>Tab</kbd>)
3. Tab back to the field (Click <kbd>Shift</kbd>+<kbd>Tab</kbd>)
4. Unselect by moving the cursor to the end of the text (Click
<kbd>Right Arrow</kbd>)
5. Trying to continue filling out the value is ignored

**Work around:**

Set the `show_guide` property to `false`

---------

Co-authored-by: Tobias Høegh <tobias@tujo.no>

packages/dnb-eufemia/src/components/input-masked/InputMaskedHooks.js

@@ -417,7 +417,10 @@ const useCallEvent = ({ setLocalValue }) => {
     const cleanedValue =
       numberValue === 0 && String(num).charAt(0) !== '0' ? '' : num
 
-    if (name === 'on_change' && numberValue === 0) {
+    if (
+      name === 'on_key_down' ||
+      (name === 'on_change' && numberValue === 0)
+    ) {
       correctCaretPosition(event.target, maskParams, props)
     }
 

packages/dnb-eufemia/src/components/input-masked/__tests__/InputMasked.test.tsx

@@ -1701,6 +1701,25 @@ describe('InputMasked with custom mask', () => {
     expect(element.value).toBe('12––​​')
   })
 
+  it('should set correct cursor position when navigating using keyboard', async () => {
+    render(<InputMasked value="1" mask={[/\d/, ' ', /\d/]} />)
+
+    const input = document.querySelector('input')
+
+    {
+      expect(document.body).toHaveFocus()
+
+      await userEvent.tab()
+
+      expect(input).toHaveFocus()
+      expect(input).toHaveValue('1 ​')
+
+      await userEvent.keyboard('{ArrowRight}2') // Remove selection
+
+      expect(input).toHaveValue('1 2')
+    }
+  })
+
   it('should show placeholder chars when show_mask is true', () => {
     render(
       <InputMasked