My input: onChange handler is not working on mobile

Question

I'm creating a React.js PWA.
I have an input field with an onChange property in it.

<input onChange={(e) => handleInput(e)} />

In my desktop browsers this works perfectly fine, but in my mobile browser it seems that the onChange handler wont be fired.
I also tried to directly alert() the onChange.

<input onChange={() => alert()} />

Again in the desktop browser it works perfectly fine, but in my mobile browser it doesn't.

---

Additional Information:

• I use Styled Components to create my input element
• I use React Hooks to update the state values
• Phone: iPhone Xr - iOS 12.3.1
• Browsers tested: Safari(web-view and PWA-view) and Google Chrome

---

Also tried:

• Use simple input element(So without Styled Components)
• Changed type to text or number
• Changed key to something what is 100% unique

---

My code

import React, { useEffect, useState } from 'react';
import styled from 'styled-components';


const StyledInput = styled.input`

`;

const Input = (props) => {
    const [value, setValue] = useState('');

    useEffect(() => {
        setValue(props.value));
    }, []);

    return (
        <StyledInput
            key="key_value"
            type="tel"
            value={value}
            onChange={(e) => setValue(e.target.value)}
        />
    )
}

Answer 1

I found out where the problem was.

I had an css-reset.css which resets the css in every browser.

I had:

 * { 
    -webkit-user-select:none;
    -khtml-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    user-select:none;
}

DON'T DO THIS! xD