MUI Custom Text Field loses focus on state change

Question

I'm using MUI library to create my React Js app.

Here I'm using the controlled Text Field component to create a simple search UI.

But there is something strange. The Text Field component loses focus after its value is changed. This is my first time facing this problem. I never faced this problem before.

How this could happen? And what is the solution.

Here is the code and the playground: https://codesandbox.io/s/mui-autocomplete-lost-focus-oenoo?

Note: if I remove the breakpoint type from the code, the Text Field component still loses focus after its value is changed.

cjl750 · Accepted Answer · 2022-11-17T22:20:56.977

It's because you're defining a component inside another component, so that component definition is recreated every time the component renders (and your component renders every time the user types into the input).

Two solutions:

Don't make it a separate component.

Instead of:

const MyComponent = () => {
  const MyInput = () => <div><input /></div>; // you get the idea

  return (
    <div>
      <MyInput />
    </div>
  );
};

Do:

const MyComponent = () => {    
  return (
    <div>
      <div><input /></div> {/* you get the idea */}
    </div>
  );
};

Define the component outside its parent component:

const MyInput = ({value, onChange}) => (
  <div>
    <input value={value} onChange={onChange} />
  </div>
);

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

  return (
    <div>
      <MyInput
        value={value}
        onChange={event => setValue(event.target.value)}
      />
    </div>
  );
};

Or use useMemo() to wrap your component and use it somewhere else. — Jakub Słowikowski, Jan 18 '23 at 10:48
Can I just say “Thank you so much for this”? It’s a life saver. — Drizzle, May 03 '23 at 04:35

score 8 · Answer 2 · answered Dec 10 '22 at 12:43

8

Be careful about your components' keys, if you set dynamic value as a key prop, it will also cause focus lost. Here is an example


{people.map(person => (
    <div key={person.name}>
      <Input type="text" value={person.name} onChange={// function which manipulates person name} />
    </div>
))}

answered Dec 10 '22 at 12:43

SchemeSonic

376
5
12

This is the correct answer when u have multiple items... – Игор Ташевски Jul 26 '23 at 02:41

score 7 · Answer 3 · answered Nov 30 '22 at 10:50

For MUI V5

Moved your custom-styled code outside the component

For example:

import React from 'react';
import { useTheme, TextField, styled } from '@mui/material'; 
import { SearchOutlined } from '@mui/icons-material';

interface SearchInputProps {   placeholder?: string;   onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;   value: string; dataTest?: string; }

const StyledSearchInput = styled(TextField)(({ theme }: any) => {   return {
    '& .MuiOutlinedInput-root': {
      borderRadius: '0.625rem',
      fontSize: '1rem',
      '& fieldset': {
        borderColor: `${theme.palette.text.secondary}`
      },
      '&.Mui-focused fieldset': {
        borderColor: `${theme.palette.primary}`
      }
    }   }; });

const SearchInput: React.FC<SearchInputProps> = ({   placeholder = 'Search...',   onChange,   value,   dataTest,   ...props }) => {   const theme = useTheme();

  return (
    <StyledSearchInput
      {...props}
      onChange={onChange}
      placeholder={placeholder}
      variant="outlined"
      value={value}
      inputProps={{ 'data-testid': dataTest ? dataTest : 'search-input' }}
      InputProps={{
        startAdornment: (
          <SearchOutlined
            sx={{ color: theme.palette.text.secondary, height: '1.5rem', width: '1.5rem' }}
          />
        )
      }}
    />   ); };

export default SearchInput;

1

it was a life saving answer – Bashid Dec 29 '22 at 21:48

score 0 · Answer 4 · answered Jul 28 '23 at 09:36

A bit late to the conversation. But adding to SchemeSonic's answer, if you have 'dynamic' component keys which you're passing to a component which renders, for arguments sake, a list of input fields, and you want to focus on a specific input field when it is mounted, you can use a ref to store a mapping of the input field ids to onMount callbacks.

Then, after mounting you can set a timeout to call the onMount callbacks. This way, you can focus on the component (or do anything using the input ref) when it is mounted.

Here's a snippet to the codesandbox solution.

<InputFieldList
      inputFieldIds={inputFieldIds}
      renderInputField={(id) => (
        <StyledTextField
          key={id}
          label={id}
          variant="outlined"
          size="small"
          inputRef={id === fieldToFocus ? fieldToFocusRef : undefined}
          value={values[id]}
          onChange={handleChange(id)}
        />
      )}
      onMount={(id) => {
        // Focus on the input field when it is mounted
        if (id === fieldToFocus) fieldToFocusRef.current?.focus();
      }}
    />

MUI Custom Text Field loses focus on state change

4 Answers4

Linked