Fix paste for personal key confirmation (IdV app) (#6443)

* Fix paste for personal key confirmation (IdV app)

**Why**: Because the primary user interaction we expect here is for the user to paste the personal key after clicking the "Copy" button on the personal key display page.

changelog: Upcoming Features, Identity Verification, Add personal key step screen

* Create separate variable for modifier

Improve clarity

See: #6443 (comment)

app/javascript/packages/verify-flow/steps/personal-key-confirm/personal-key-input.spec.tsx

@@ -49,6 +49,17 @@ describe('PersonalKeyInput', () => {
     expect(input.value).to.equal('1234-1234-1234-1234');
   });
 
+  it('allows the user to paste the personal key from their clipboard', async () => {
+    const { getByRole } = render(<PersonalKeyInput />);
+
+    const input = getByRole('textbox') as HTMLInputElement;
+
+    input.focus();
+    await userEvent.paste('1234-1234-1234-1234');
+
+    expect(input.value).to.equal('1234-1234-1234-1234');
+  });
+
   it('validates the input value against the expected value (case-insensitive, crockford)', async () => {
     const { getByRole } = render(<PersonalKeyInput expectedValue="abcd-0011-DEFG-1111" />);
 

app/javascript/packages/verify-flow/steps/personal-key-confirm/personal-key-input.tsx

@@ -1,10 +1,18 @@
 import { forwardRef, useCallback } from 'react';
 import type { ForwardedRef } from 'react';
 import Cleave from 'cleave.js/react';
+import type { ReactInstanceWithCleave } from 'cleave.js/react/props';
 import { t } from '@18f/identity-i18n';
 import { ValidatedField } from '@18f/identity-validated-field';
 import type { ValidatedFieldValidator } from '@18f/identity-validated-field';
 
+/**
+ * Internal Cleave.js React instance API methods.
+ */
+interface CleaveInstanceInternalAPI {
+  updateValueState: () => void;
+}
+
 interface PersonalKeyInputProps {
   /**
    * The correct personal key to validate against.
@@ -42,6 +50,9 @@ function PersonalKeyInput(
   return (
     <ValidatedField validate={validate}>
       <Cleave
+        onInit={(owner) => {
+          (owner as ReactInstanceWithCleave & CleaveInstanceInternalAPI).updateValueState();
+        }}
         options={{
           blocks: [4, 4, 4, 4],
           delimiter: '-',

spec/support/shared_examples_for_personal_keys.rb

@@ -1,3 +1,5 @@
+require 'rbconfig'
+
 shared_examples_for 'personal key page' do
   include PersonalKeyHelper
   include JavascriptDriverHelper
@@ -36,6 +38,14 @@
       copied_text = page.evaluate_async_script('navigator.clipboard.readText().then(arguments[0])')
 
       expect(copied_text).to eq(scrape_personal_key)
+
+      click_continue
+      mod = mac? ? :meta : :control
+      page.find(':focus').send_keys [mod, 'v']
+
+      path_before_submit = current_path
+      within('[role=dialog]') { click_on t('forms.buttons.continue') }
+      expect(current_path).not_to eq path_before_submit
     end
 
     it 'validates as case-insensitive, crockford-normalized, length-limited, dash-flexible' do
@@ -61,4 +71,8 @@
       expect(current_path).not_to eq path_before_submit
     end
   end
+
+  def mac?
+    RbConfig::CONFIG['host_os'].match? 'darwin'
+  end
 end