Preventing paste when readOnly is true on input component (#2774)

* preventing paste when readOnly is true

src/app-components/Input/Input.tsx

@@ -34,7 +34,13 @@ export type InputProps = {
 >;
 
 export function Input(props: InputProps) {
-  const { size = 'sm', ...rest } = props;
+  const { size = 'sm', readOnly, ...rest } = props;
+
+  const handlePaste = (event: React.ClipboardEvent<HTMLInputElement>) => {
+    if (readOnly) {
+      event.preventDefault();
+    }
+  };
 
   if (props.textonly) {
     const { value, id, className } = props;
@@ -56,7 +62,9 @@ export function Input(props: InputProps) {
 
   return (
     <Textfield
+      onPaste={handlePaste}
       size={size}
+      readOnly={readOnly}
       {...rest}
     />
   );

src/layout/Input/InputComponent.test.tsx

@@ -167,13 +167,33 @@ describe('InputComponent', () => {
     expect(inputComponent).toHaveValue(formattedValue);
   });
 
+  it('should prevent pasting when readOnly is true', async () => {
+    const initialValue = 'initial value';
+    await render({
+      component: {
+        readOnly: true,
+      },
+      queries: {
+        fetchFormData: () => Promise.resolve({ some: { field: initialValue } }),
+      },
+    });
+
+    const inputComponent = screen.getByRole('textbox') as HTMLInputElement;
+    expect(inputComponent).toHaveValue(initialValue);
+
+    await userEvent.click(inputComponent);
+
+    await userEvent.paste('pasted text');
+
+    expect(inputComponent).toHaveValue(initialValue);
+  });
+
   const render = async ({ component, ...rest }: Partial<RenderGenericComponentTestProps<'Input'>> = {}) =>
     await renderGenericComponentTest({
       type: 'Input',
       renderer: (props) => <InputComponent {...props} />,
       component: {
         id: 'mock-id',
-        readOnly: false,
         required: false,
         dataModelBindings: {
           simpleBinding: { dataType: defaultDataTypeMock, field: 'some.field' },

src/layout/Input/InputComponent.tsx

@@ -97,7 +97,6 @@ export const InputVariant = ({ node, overrideDisplay }: Pick<IInputProps, 'node'
 
   const reactNumberFormatConfig = useMapToReactNumberConfig(formatting, formValue);
   const variant = getVariantWithFormat(inputVariant, reactNumberFormatConfig?.number);
-
   switch (variant.type) {
     case 'search':
     case 'text':
@@ -148,6 +147,9 @@ export const InputVariant = ({ node, overrideDisplay }: Pick<IInputProps, 'node'
              * https://github.com/s-yadav/react-number-format/issues/349
              *  */
             event.preventDefault();
+            if (inputProps.readOnly) {
+              return;
+            }
             const pastedText = event.clipboardData.getData('Text');
             if (pastedText.indexOf(',') !== -1) {
               setValue('simpleBinding', pastedText.replace(',', '.'));