From 149c7c9edf79e62a5003e494b721a873020e0e73 Mon Sep 17 00:00:00 2001
From: Frederik Bolding <frederik.bolding@gmail.com>
Date: Mon, 16 Dec 2024 18:07:50 +0100
Subject: [PATCH] fix: `FileInput` displaying wrong outside of `Field` (#29243)

<!--
Please submit this PR as a draft initially.
Do not mark it as "Ready for review" until the template has been
completely filled out, and PR status checks have passed at least once.
-->

## **Description**

The `FileInput` was broken outside of its use in `Field` due to the
mapping logic being flawed. This PR fixes this by correcting the mapper.
This issue way not was not caught due to the component not being E2E
tested outside a Field.

[![Open in GitHub
Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/MetaMask/metamask-extension/pull/29243?quickstart=1)


## **Manual testing steps**
```ts
import type { OnRpcRequestHandler } from '@metamask/snaps-sdk';
import {
  Box,
  Text,
  Bold,
  Input,
  Field,
  FileInput,
} from '@metamask/snaps-sdk/jsx';

/**
 * Handle incoming JSON-RPC requests, sent through `wallet_invokeSnap`.
 *
 * @param args - The request handler args as object.
 * @param args.origin - The origin of the request, e.g., the website that
 * invoked the snap.
 * @param args.request - A validated JSON-RPC request object.
 * @returns The result of `snap_dialog`.
 * @throws If the request method is not valid for this snap.
 */
export const onRpcRequest: OnRpcRequestHandler = async ({
  origin,
  request,
}) => {
  switch (request.method) {
    case 'hello':
      return snap.request({
        method: 'snap_dialog',
        params: {
          type: 'confirmation',
          content: (
            <Box>
              <Text>
                Hello, <Bold>{origin}</Bold>!
              </Text>
              <Text>
                This custom confirmation is just for display purposes.
              </Text>
              <Text>
                But you can edit the snap source code to make it do something,
                if you want to!
              </Text>
              <FileInput name="file-input" />
            </Box>
          ),
        },
      });
    default:
      throw new Error('Method not found.');
  }
};
```
---
 .../snaps/snap-ui-renderer/components/file-input.ts | 13 +++++--------
 1 file changed, 5 insertions(+), 8 deletions(-)

diff --git a/ui/components/app/snaps/snap-ui-renderer/components/file-input.ts b/ui/components/app/snaps/snap-ui-renderer/components/file-input.ts
index edeba6d89551..8ea22787cfff 100644
--- a/ui/components/app/snaps/snap-ui-renderer/components/file-input.ts
+++ b/ui/components/app/snaps/snap-ui-renderer/components/file-input.ts
@@ -6,14 +6,11 @@ export const fileInput: UIComponentFactory<FileInputElement> = ({
   element,
   form,
 }) => ({
-  element: 'SnapUIInput',
+  element: 'SnapUIFileInput',
   props: {
-    element: 'SnapUIFileInput',
-    props: {
-      name: element.props.name,
-      accept: element.props.accept,
-      compact: element.props.compact,
-      form,
-    },
+    name: element.props.name,
+    accept: element.props.accept,
+    compact: element.props.compact,
+    form,
   },
 });