Windows Input lost focus with onChange

[decaller]

Hello there, I'm using react-desktop on electron with react-redux boilerplate... I got a problem when using TextInput with windows theme, the onChange method always update the wrapper "data-reactdeskropid". It make the form lost focus. the onChange using redux action. I tried using the basic html input, and it works fine. Is this a bug? Or are there ways to stop update the wrapper?

[gabrielbull]

Hi, can you post a sample of code to reproduce the problem?

[bushidocodes]

I'm not sure if this was resolved, but I'm currently hitting the same issue. Quite possibly user error. I'm experiencing the issue with all of my TextInputs, but I've snipped just one below to try to be concise. When I look at the Elements tab in devtools, it looks like all of the s are being redrawn when onChange is triggered on any single .

Container

// @flow
import { connect } from 'react-redux';
import ConfigForm from '../components/ConfigForm';
import { setHostName, setFtpPort, setFtpUserName, setFtpPassword } from '../actions/configForm.js';
...

function mapStateToProps(state) {
  return {
...
    ftpPassword: state.config.ftpPassword,
...
  };
}
function mapDispatchToProps(dispatch) {
  return {
...
    setFtpPassword: (ftpPassword) => dispatch(setFtpPassword(ftpPassword)),
...
  };
}
export default connect(mapStateToProps, mapDispatchToProps)(ConfigForm);

Component

export default function (props) {
  let ftpPassword = props.ftpPassword;
  const setFtpPassword = props.setFtpPassword;

return (
    <View
      color={color}
      theme={theme}
      layout='vertical'
      horizontalAlignment='center'
      width='100%'
      height='100%'
      >
...
      <TextInput
        placeholder="Password"
        type='password'
        value={ftpPassword}
        onChange={(evt) => setFtpPassword(evt.target.value)}
        />
...
</View>
  );
}

[tgds]

Hi @gabrielbull, the background helper in the render function is the problem. On each call it creates BackgroundElement class, and then returns <BackgroundElement/>;. Because of that, on each value prop change, a new component is created and rendered => input element is completely redrawn and looses focus. styleHelper is doing the same thing and this is all very expensive and needs to be rewritten.

    const input = (
      <PlaceholderStyle placeholderStyle={this.placeholderStyle}>
        {Background(
          <input
            ref="element"
            type={`${password ? 'password' : 'text'}`}
            style={componentStyle}
            {...props}
          />,
          this.props
        )}
      </PlaceholderStyle>
    );

[gabrielbull]

@tgds Thanks for digging deeper in this issue. I am no longer involved in this library and at the moment, no one really is. If you want, I can add you as a maintainer and you can fix this issue. Let me know. Thanks.

[tgds]

Thanks @gabrielbull. I could give it a shot contribute back as I currently need a library like this for a new project. Will send PR over the weekend.

[abhay29121994]

hiii . i also face this problem .when i type one character then focus lost what i do ? UsernameForm.txt