MetaMask · abretonc7s · May 4, 2026 · Apr 20, 2026 · Apr 21, 2026 · Apr 21, 2026
diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json
diff --git a/app/_locales/en_GB/messages.json b/app/_locales/en_GB/messages.json
@@ -145,6 +145,26 @@ describe('ClosePositionModal', () => {
     mockSubmitRequestToBackground.mockResolvedValue({ success: true });
   });
 
+  describe('auto-focus', () => {
+    it('auto-focuses the Close Position submit button on mount', async () => {
+      renderWithProvider(
+        <ClosePositionModal
+          isOpen
+          onClose={jest.fn()}
+          position={basePosition}
+          currentPrice={2900}
+        />,
+        mockStore,
+      );
+
+      await waitFor(() => {
+        expect(
+          screen.getByTestId('perps-close-position-modal-submit'),
+        ).toHaveFocus();
+      });
+    });
+  });
+
   describe('ORDER_SIZE_MIN from background', () => {
     it('shows localized min-notional message when close rejects with ORDER_SIZE_MIN', async () => {
       const user = userEvent.setup();

@@ -671,6 +671,7 @@ export const ClosePositionModal: React.FC<ClosePositionModalProps> = ({
               'data-testid': 'perps-close-position-modal-submit',
               children: t('perpsClosePosition'),
               disabled: isSubmitDisabled,
+              autoFocus: true,
             }}
           />
         </ModalContent>

@@ -85,6 +85,74 @@ describe('EditMarginModalContent', () => {
     expect(screen.getByText(/available/iu)).toBeInTheDocument();
   });
 
+  describe('auto-focus and select-all', () => {
+    it('auto-focuses the margin amount input on mount', () => {
+      renderWithProvider(
+        <EditMarginModalContent {...defaultProps} />,
+        mockStore,
+      );
+
+      const container = screen.getByTestId('perps-edit-margin-amount-input');
+      const input = container.querySelector('input') as HTMLInputElement;
+      expect(input).toHaveFocus();
+    });
+
+    it('selects existing margin amount on focus', () => {
+      renderWithProvider(
+        <EditMarginModalContent {...defaultProps} />,
+        mockStore,
+      );
+
+      const container = screen.getByTestId('perps-edit-margin-amount-input');
+      const input = container.querySelector('input') as HTMLInputElement;
+      fireEvent.change(input, { target: { value: '42' } });
+      const selectSpy = jest.spyOn(input, 'select');
+      fireEvent.focus(input);
+      expect(selectSpy).toHaveBeenCalled();
+    });
+  });
+
+  describe('keyboard submission', () => {
+    it('submits margin update when Enter is pressed with a valid amount', async () => {
+      renderWithProvider(
+        <EditMarginModalContent {...defaultProps} />,
+        mockStore,
+      );
+
+      const container = screen.getByTestId('perps-edit-margin-amount-input');
+      const input = container.querySelector('input') as HTMLInputElement;
+      fireEvent.change(input, { target: { value: '100' } });
+
+      fireEvent.keyDown(input, { key: 'Enter' });
+
+      await waitFor(() => {
+        expect(mockSubmitRequestToBackground).toHaveBeenCalledWith(
+          'perpsUpdateMargin',
+          [
+            expect.objectContaining({
+              symbol: basePosition.symbol,
+              amount: '100',
+            }),
+          ],
+        );
+      });
+    });
+
+    it('does not submit when Enter is pressed with an empty amount', () => {
+      renderWithProvider(
+        <EditMarginModalContent {...defaultProps} />,
+        mockStore,
+      );
+
+      const container = screen.getByTestId('perps-edit-margin-amount-input');
+      const input = container.querySelector('input') as HTMLInputElement;
+
+      fireEvent.keyDown(input, { key: 'Enter' });
+
+      expect(mockSubmitRequestToBackground).not.toHaveBeenCalled();
+    });
+  });
+
   describe('geo-blocking', () => {
     it('shows geo-block modal instead of saving when user is not eligible', async () => {
       mockUsePerpsEligibility.mockReturnValue({ isEligible: false });

@@ -447,12 +447,34 @@ export const EditMarginModalContent: React.FC<EditMarginModalContentProps> = ({
               size={TextFieldSize.Md}
               value={marginAmount}
               onChange={handleAmountChange}
+              onFocus={(event: React.FocusEvent<HTMLInputElement>) =>
+                event.target.select()
+              }
               placeholder="0.00"
               borderRadius={BorderRadius.MD}
               borderWidth={0}
               backgroundColor={BackgroundColor.backgroundMuted}
               disabled={isSaving}
-              inputProps={{ inputMode: 'decimal', size: 10 }}
+              autoFocus
+              data-testid="perps-edit-margin-amount-input"
+              inputProps={{
+                inputMode: 'decimal',
+                size: 10,
+                onKeyDown: (event: React.KeyboardEvent<HTMLInputElement>) => {
+                  if (
+                    event.key !== 'Enter' ||
+                    event.shiftKey ||
+                    event.nativeEvent.isComposing ||
+                    confirmDisabled
+                  ) {
+                    return;
+                  }
+                  event.preventDefault();
+                  handleSaveMargin().catch(() => {
+                    // Errors are surfaced via the perps toast system.
+                  });
+                },
+              }}
               startAccessory={
                 <Text
                   variant={TextVariant.BodyMd}

@@ -522,4 +522,91 @@ describe('AmountInput', () => {
       expect(screen.getByTestId('amount-slider')).toBeInTheDocument();
     });
   });
+
+  describe('auto-focus and select-all', () => {
+    it('auto-focuses the USD input when autoFocus is true', () => {
+      renderWithProvider(
+        <AmountInput {...defaultProps} autoFocus />,
+        mockStore,
+      );
+
+      const container = screen.getByTestId('amount-input-field');
+      const input = container.querySelector('input');
+      expect(input).toHaveFocus();
+    });
+
+    it('does not auto-focus the USD input when autoFocus is false', () => {
+      renderWithProvider(
+        <AmountInput {...defaultProps} autoFocus={false} />,
+        mockStore,
+      );
+
+      const container = screen.getByTestId('amount-input-field');
+      const input = container.querySelector('input');
+      expect(input).not.toHaveFocus();
+    });
+
+    it('selects existing USD value on focus', () => {
+      renderWithProvider(
+        <AmountInput {...defaultProps} amount="123.45" />,
+        mockStore,
+      );
+
+      const container = screen.getByTestId('amount-input-field');
+      const input = container.querySelector('input') as HTMLInputElement;
+      const selectSpy = jest.spyOn(input, 'select');
+      fireEvent.focus(input);
+      expect(selectSpy).toHaveBeenCalled();
+    });
+
+    it('selects existing token value after focus switches to editing mode', () => {
+      renderWithProvider(
+        <AmountInput {...defaultProps} amount="9000" currentPrice={45000} />,
+        mockStore,
+      );
+
+      const container = screen.getByTestId('amount-input-token-field');
+      const input = container.querySelector('input') as HTMLInputElement;
+      const selectSpy = jest.spyOn(input, 'select');
+      fireEvent.focus(input);
+
+      expect(input).toHaveValue('0.2');
+      expect(selectSpy).toHaveBeenCalled();
+    });
+
+    it('selects existing percent value on focus', () => {
+      renderWithProvider(
+        <AmountInput {...defaultProps} balancePercent={42} />,
+        mockStore,
+      );
+
+      const container = screen.getByTestId('balance-percent-input');
+      const input = container.querySelector('input') as HTMLInputElement;
+      const selectSpy = jest.spyOn(input, 'select');
+      fireEvent.focus(input);
+      expect(selectSpy).toHaveBeenCalled();
+    });
+
+    it('uses custom usdPlaceholder when provided', () => {
+      renderWithProvider(
+        <AmountInput {...defaultProps} usdPlaceholder="min $10" />,
+        mockStore,
+      );
+
+      const container = screen.getByTestId('amount-input-field');
+      const input = container.querySelector('input');
+      expect(input).toHaveAttribute('placeholder', 'min $10');
+    });
+
+    it('exposes the USD input through usdInputRef', () => {
+      const ref: { current: HTMLInputElement | null } = { current: null };
+      renderWithProvider(
+        <AmountInput {...defaultProps} usdInputRef={ref} />,
+        mockStore,
+      );
+
+      expect(ref.current).not.toBeNull();
+      expect(ref.current?.tagName).toBe('INPUT');
+    });
+  });
 });
@@ -11,7 +11,13 @@ import {
   IconSize,
   IconColor,
 } from '@metamask/design-system-react';
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
 
 import {
   BorderRadius,
@@ -29,6 +35,12 @@ import {
   isUnsignedDecimalInput,
 } from '../../utils';
 
+const handleNumericFocusSelectAll = (
+  event: React.FocusEvent<HTMLInputElement>,
+) => {
+  event.target.select();
+};
+
 /**
  * AmountInput - Size section with dual USD/token inputs and percentage slider
  *
@@ -45,6 +57,9 @@ import {
  * @param options0.currentPrice
  * @param options0.onAddFunds
  * @param options0.szDecimals
+ * @param options0.autoFocus
+ * @param options0.usdPlaceholder
+ * @param options0.usdInputRef
  */
 export const AmountInput: React.FC<AmountInputProps> = ({
   amount,
@@ -57,12 +72,17 @@ export const AmountInput: React.FC<AmountInputProps> = ({
   currentPrice,
   szDecimals,
   onAddFunds,
+  autoFocus = false,
+  usdPlaceholder = '0.00',
+  usdInputRef,
 }) => {
   const t = useI18nContext();
   const { formatCurrencyWithMinThreshold, formatNumber } = useFormatters();
   const [percentInputValue, setPercentInputValue] = useState<string>(
     String(balancePercent),
   );
+  const tokenInputRef = useRef<HTMLInputElement | null>(null);
+  const shouldSelectTokenOnEditRef = useRef(false);
 
   useEffect(() => {
     setPercentInputValue(String(balancePercent));
@@ -93,6 +113,14 @@ export const AmountInput: React.FC<AmountInputProps> = ({
   const [isEditingToken, setIsEditingToken] = useState(false);
   const [tokenInputValue, setTokenInputValue] = useState(unGroupedTokenDisplay);
 
+  useEffect(() => {
+    if (!isEditingToken || !shouldSelectTokenOnEditRef.current) {
+      return;
+    }
+    shouldSelectTokenOnEditRef.current = false;
+    tokenInputRef.current?.select();
+  }, [isEditingToken, tokenInputValue]);
+
   // When not editing, derive the displayed token value from the current amount
   // rather than syncing via an effect — avoids a stale intermediate render.
   const displayedTokenValue = isEditingToken
@@ -193,10 +221,14 @@ export const AmountInput: React.FC<AmountInputProps> = ({
     ],
   );
 
-  const handleTokenFocus = useCallback(() => {
-    setTokenInputValue(unGroupedTokenDisplay);
-    setIsEditingToken(true);
-  }, [unGroupedTokenDisplay]);
+  const handleTokenFocus = useCallback(
+    (_event: React.FocusEvent<HTMLInputElement>) => {
+      shouldSelectTokenOnEditRef.current = true;
+      setTokenInputValue(unGroupedTokenDisplay);
+      setIsEditingToken(true);
+    },
+    [unGroupedTokenDisplay],
+  );
 
   const handleTokenBlur = useCallback(() => {
     setIsEditingToken(false);
@@ -317,13 +349,16 @@ export const AmountInput: React.FC<AmountInputProps> = ({
             size={TextFieldSize.Md}
             value={amount}
             onChange={handleAmountChange}
+            onFocus={handleNumericFocusSelectAll}
             onBlur={handleAmountBlur}
-            placeholder="0.00"
+            placeholder={usdPlaceholder}
             borderRadius={BorderRadius.MD}
             borderWidth={0}
             backgroundColor={BackgroundColor.backgroundMuted}
             className="w-full"
             data-testid="amount-input-field"
+            autoFocus={autoFocus}
+            inputRef={usdInputRef}
             inputProps={{ inputMode: 'decimal' }}
             startAccessory={
               <Text
@@ -343,6 +378,7 @@ export const AmountInput: React.FC<AmountInputProps> = ({
             onFocus={handleTokenFocus}
             onBlur={handleTokenBlur}
             placeholder="0"
+            inputRef={tokenInputRef}
             borderRadius={BorderRadius.MD}
             borderWidth={0}
             backgroundColor={BackgroundColor.backgroundMuted}
@@ -380,6 +416,7 @@ export const AmountInput: React.FC<AmountInputProps> = ({
             size={TextFieldSize.Sm}
             value={percentInputValue}
             onChange={handlePercentInputChange}
+            onFocus={handleNumericFocusSelectAll}
             onBlur={handlePercentInputBlur}
             borderRadius={BorderRadius.MD}
             borderWidth={0}

@@ -58,6 +58,7 @@ export const DirectionTabs: React.FC<DirectionTabsProps> = ({
       data-testid="direction-tabs"
     >
       <ButtonBase
+        type="button"
         className={longTabStyles}
         onClick={() => handleDirectionClick('long')}
         data-testid="direction-tab-long"
@@ -75,6 +76,7 @@ export const DirectionTabs: React.FC<DirectionTabsProps> = ({
       </ButtonBase>
 
       <ButtonBase
+        type="button"
         className={shortTabStyles}
         onClick={() => handleDirectionClick('short')}
         data-testid="direction-tab-short"