Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

InputNumber not working in mobile screen

See original GitHub issue

I have searched the issues of this repository and believe that this is not a duplicate.

Reproduction link

https://github.com/Pacheco95/antd-input-number-mobile-bug-report

Steps to reproduce

npx create-next-app@latest --ts
npm i antd
replace index.tsx content with

import type { NextPage } from 'next'

import {InputNumber} from 'antd'

const Home: NextPage = () => {
  return (
    <div style={{
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center',
      height: '100vh'
    }}>
      <InputNumber style={{ width: '150px'}} placeholder='Type something'/>
    </div>
  )
}

export default Home

npm run dev
Activate mobile view in chrome devtools
Reload the page

What is expected?

The InputNumber to be shown as the same when in desktop mode

What is actually happening?

The component appears flattened

Environment	Info
antd	4.17.3
React	17.0.2
System	Ubuntu 20.04.3 LTS
Browser	Version 95.0.4638.69 (Official Build) (64-bit)

I’m using Next.js with Typescript template. Maybe it’s related with SSR I never saw this bug happen in my CRA apps

Issue Analytics

State:
Created 2 years ago
Reactions:2
Comments:10 (2 by maintainers)

Top GitHub Comments

2reactions

Josemankicommented, Jan 26, 2022

Much, much appreciated. I initially thought about indeed just having an input working just with numbers but really wanted to keep the spinner, haha. Cheers and thank you very much!

2reactions

afc163commented, Jan 7, 2022

It seems be intented: https://github.com/react-component/input-number/blob/d3de1472f23b4978d74a221e4b11db5408900ef9/src/StepHandler.tsx#L62

Step handler is hard to touch in mobile device.

Top Results From Across the Web

HTML number input min and max not working properly

When I change the time in the rendered UI using the little arrows on the right-hand side of the input field, everything works...

react-phone-number-input - npm

Start using react-phone-number-input in your project by running `npm i react-phone-number-input`. There are 286 other projects in the npm ...

Angular PrimeNG InputNumber Component - GeeksforGeeks

In this article, we will know how to use the InputNumber component in Angular PrimeNG. We will also learn about the properties, events, ......

<input type="tel"> - HTML: HyperText Markup Language | MDN

To do this, use the list attribute. This doesn't limit the user to those options, but does allow them to select commonly-used telephone...

HTML DOM Input Number Object - W3Schools

The Input Number object represents an HTML <input> element with type="number". ... disabled, Sets or returns whether a number field is disabled, or...