input problem for iphone user on gatsbyjs progressive web app

Question

A simple app containing only input fields with types an placeholders where iphone users cannot input neither email nor password.

Let me know what info to provide to solve this problem or please direct me to the appropriate article. I wasn't able to find one that covers the same problem.

everything works fine on android.

import React from "react"

const HomePage = () => {
    return (
        <div>
            <input type="email" placeholder="email" />
            <input type="password" placeholder="password" />
        </div>
    )
}

export default HomePage

have you checked this issue? https://stackoverflow.com/questions/49889003/cannot-write-into-input-field-on-safari — Mathias, Feb 28 '21 at 13:14
Thank you! that solved my problem, I had user-select: none globally. :))))) — datogio, Feb 28 '21 at 13:34

score 1 · Accepted Answer · answered Feb 28 '21 at 15:21

1

My guess it that is not Gatsby related, it seems a behavior (CSS) issue. Try adding these rules:

input, input:before, input:after {
  -webkit-user-select: initial;
  -khtml-user-select: initial;
  -moz-user-select: initial;
  -ms-user-select: initial;
  user-select: initial;
}

Source: Cannot write into input field on safari

answered Feb 28 '21 at 15:21

Ferran Buireu

28,630
6
39
67

1

Thank you, that was the exact problem, I had user-select: none globaly. – datogio Mar 01 '21 at 14:33
1

I'm glad it helped. If the issue has been solved please consider accepting/upvoting the answer to close the issue :) – Ferran Buireu Mar 01 '21 at 14:37

input problem for iphone user on gatsbyjs progressive web app

1 Answers1