CODEWITHSUNDEEP
javascriptreactjsinputreact-hooksmaterial-ui
Chukwuemeka Maduekwe
Chukwuemeka Maduekwe

Reputation: 8526

MaterialUI Textfield/Input not working on IPhone

I just discovered that all apps I've been working on using MaterialUI, iPhone users are unable to type in either Textfield or Input, with value and setValue properly set.

I was able to fix this individually by adding

      <TextField
        name="source-text"
        multiline
        id="source"
        minRows={3}
        fullWidth
        value={sourceText}
        variant="standard" // <== to enable us disable border
        onChange={(e) => handleSourceTextChange(e.target.value)}
        sx={{
          fontSize: 122,
          fontWeight: 500,
          color: "#474747",
        }}
        inputProps={{
          style: {
            fontSize: 22,
            "-webkit-user-select": "text" /* Chrome, Opera, Safari */,
            "-moz-user-select": "text" /* Firefox 2+ */,
            "-ms-user-select": "text" /* IE 10+ */,
            "user-select": "text" /* Standard syntax */,
          },
        }} // font size of input text
        InputProps={{
          style: {
            fontSize: 22,
            "-webkit-user-select": "text" /* Chrome, Opera, Safari */,
            "-moz-user-select": "text" /* Firefox 2+ */,
            "-ms-user-select": "text" /* IE 10+ */,
            "user-select": "text" /* Standard syntax */,
          }, // font size of input label
          disableUnderline: true, // <== to hide underline in standard TextField variant
        }}
      />

and the handler

  const handleSourceTextChange = (value) =>  setSourceText(value);

I'd like to know if there's a way to set this style from the MUI createTheme, so I won't have to keep repeating my code in each Textfield

I've tried adding this to the root theme

    MuiTextField: {
      styleOverrides: {
        root: {
          "-webkit-user-select": "text !important" /* Chrome, Opera, Safari */,
          "-moz-user-select": "text !important" /* Firefox 2+ */,
          "-ms-user-select": "text !important" /* IE 10+ */,
          "user-select": "text !important" /* Standard syntax */,
          // border: "3px solid red !important",

          "& input:valid:focus + fieldset": {
            "-webkit-user-select": "text !important" /* Chrome, Opera, Safari */,
            "-moz-user-select": "text !important" /* Firefox 2+ */,
            "-ms-user-select": "text !important" /* IE 10+ */,
            "user-select": "text !important" /* Standard syntax */,
            // borderLeftWidth: 6,
            // padding: "4px !important", // override inline-style
          },
        },
      },
    },

Upvotes: 0

Views: 1157

Answers (1)

Chukwuemeka Maduekwe
Chukwuemeka Maduekwe

Reputation: 8526

Create a style override for all input components in MaterialUI that you'll be using, like this:

import { createTheme } from "@mui/material/styles";

const iPhoneInput = {
  styleOverrides: {
    root: {
      "*": {
        "-webkit-user-select": "text !important" /* Chrome, Opera, Safari */,
        "-moz-user-select": "text !important" /* Firefox 2+ */,
        "-ms-user-select": "text !important" /* IE 10+ */,
        "user-select": "text !important" /* Standard syntax */,
      },
    },
  },
};

const muiTheme = createTheme({
  components: {
    MuiTextField: iPhoneInput,
    MuiInput: iPhoneInput,
    MuiFilledInput: iPhoneInput,
    MuiOutlinedInput: iPhoneInput,
  },
});

export default muiTheme;

In your app entry, wrap your components with <ThemeProvider theme={theme}> and pass the theme object to it.

Upvotes: 1

Related Questions