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-ponents';


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)}
        />
    )
}

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-ponents';


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)}
        />
    )
}

• javascript
• reactjs
• react-hooks
• styled-ponents

• Need more information. On what mobile browser is it not working? – Karan Commented Jul 17, 2019 at 9:32
• 1 @Karan all of the mobile browsers. I'll update my Additional information... – MrLine Commented Jul 17, 2019 at 9:35
• Can you please try these: 1. change type to text instead of tel. 2. Use simple input and not styled input. This will tell us if its the styled ponent issue or something with react. – Karan Commented Jul 17, 2019 at 9:39
• But ofcourse it should not matter in wich Browser I am. It should work in each browser... – MrLine Commented Jul 17, 2019 at 9:40
• @Karan also tried those actions ;) – MrLine Commented Jul 17, 2019 at 9:41

1 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