From 207245fb240ff41362bb90a9db83ca7faef1a2f7 Mon Sep 17 00:00:00 2001
From: Frederik Bolding <frederik.bolding@gmail.com>
Date: Mon, 16 Dec 2024 18:20:58 +0100
Subject: [PATCH] fix: Prevent loss of focus when using UI inputs without
 labels (#29238)

<!--
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**

Prevents loss of focus when using UI inputs without labels due to the
layout of the children being different. This PR fixes it by using a
query selector instead of assuming the child to be a index 0.

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

## **Manual testing steps**

```ts
import type { OnRpcRequestHandler } from '@metamask/snaps-sdk';
import { Box, Text, Bold, Input, Field } 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>
              <Field>
                <Input name="foo" />
              </Field>
            </Box>
          ),
        },
      });
    default:
      throw new Error('Method not found.');
  }
};

export const onUserInput = async ({ id, event }) => {
  await snap.request({
    method: 'snap_updateInterface',
    params: {
      id,
      ui: (
        <Box>
          <Text>Hello world!</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>
          <Field>
            <Input name="foo" />
          </Field>
          <Text>{event.value ?? ''}</Text>
        </Box>
      ),
    },
  });
};

```
---
 ui/components/app/snaps/snap-ui-input/snap-ui-input.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/ui/components/app/snaps/snap-ui-input/snap-ui-input.tsx b/ui/components/app/snaps/snap-ui-input/snap-ui-input.tsx
index 51c1c9a54a7a..469a8313f4a1 100644
--- a/ui/components/app/snaps/snap-ui-input/snap-ui-input.tsx
+++ b/ui/components/app/snaps/snap-ui-input/snap-ui-input.tsx
@@ -33,11 +33,11 @@ export const SnapUIInput: FunctionComponent<
 
   /*
    * Focus input if the last focused input was this input
-   * This avoids loosing the focus when the UI is re-rendered
+   * This avoids losing the focus when the UI is re-rendered
    */
   useEffect(() => {
     if (inputRef.current && name === focusedInput) {
-      (inputRef.current.children[0] as HTMLInputElement).focus();
+      (inputRef.current.querySelector('input') as HTMLInputElement).focus();
     }
   }, [inputRef]);