From 34fe44c8db42ede88c69627974bac5f72e5dc848 Mon Sep 17 00:00:00 2001
From: Guillaume Roux <guillaumeroux123@gmail.com>
Date: Sat, 19 Oct 2024 12:09:35 +0200
Subject: [PATCH] fix(snaps): Remove arrows of custom UI inputs (#27953)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## **Description**

This PR removes the HTML arrows in custom UI inputs of type `number`.

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

## **Related issues**

Fixes:

## **Manual testing steps**

```ts
import {
  Box,
  Button,
  Container,
  Footer,
  Heading,
  Input,
  Text,
  type SnapComponent,
} from '@metamask/snaps-sdk/jsx';

/**
 * A custom dialog component.
 *
 * @returns The custom dialog component.
 */
export const CustomDialog: SnapComponent = () => (
  <Container>
    <Box>
      <Input name="number-input" type="number" />
    </Box>
    <Footer>
      <Button name="cancel">Cancel</Button>
      <Button name="confirm">Confirm</Button>
    </Footer>
  </Container>
);
```

## **Screenshots/Recordings**

<!-- If applicable, add screenshots and/or recordings to visualize the
before and after of your change. -->

### **Before**

![Screenshot from 2024-10-18
13-00-54](https://github.com/user-attachments/assets/eb96f33d-0cd9-4b26-ad42-ccfae207d0f5)

### **After**

![Screenshot from 2024-10-18
12-57-41](https://github.com/user-attachments/assets/08a0cf66-369f-49f1-a51a-7b93cf70e016)

## **Pre-merge author checklist**

- [ ] I've followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask
Extension Coding
Standards](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/CODING_GUIDELINES.md).
- [ ] I've completed the PR template to the best of my ability
- [ ] I’ve included tests if applicable
- [ ] I’ve documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [ ] I’ve applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.

## **Pre-merge reviewer checklist**

- [ ] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [ ] I confirm that this PR addresses all acceptance criteria described
in the ticket it closes and includes the necessary testing evidence such
as recordings and or screenshots.
---
 ui/components/app/snaps/snap-ui-input/index.scss | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/ui/components/app/snaps/snap-ui-input/index.scss b/ui/components/app/snaps/snap-ui-input/index.scss
index 8dfc06f10fcc..abe966e822a1 100644
--- a/ui/components/app/snaps/snap-ui-input/index.scss
+++ b/ui/components/app/snaps/snap-ui-input/index.scss
@@ -3,6 +3,17 @@
     gap: 8px;
   }
 
+  & .mm-text-field > input {
+    &::-webkit-outer-spin-button,
+    &::-webkit-inner-spin-button {
+      -webkit-appearance: none;
+      margin: 0;
+    }
+
+    &[type=number] {
+      -moz-appearance: textfield;
+    }
+  }
 
 
   & .snap-ui-renderer__image {