Topic: MDBInput doesn't hold cursos position in controlled state.

Jozef Bíroš free asked 4 years ago


Expected behavior Cursor shouldn't jump at the end of Input in controlled state.

Actual behavior Input in controlled state is causing cursor to jump at the end, when trying to edit at the beginning or in middle of text.

Resources (screenshots, code snippets etc.)

<MDBInput value={value} onChange={onChange} />

Deahrage free answered 4 years ago


Hello, I have encountered this bug aswell as you do not have public repository not provide original source I cannot attempt to fix the issue myself and do pull request.

However, I have a theory, are you sure that you are not removing the input's value before changing to the next value? When value from input is removed and new one is set instead of changing value right away it moves caret to the end of the input.

This is not a DOM's issue though as this occurs only and only when using Redux-Form when using native DOM element input ti works fine and when using MDB without Redux-Form it works fine too.

Thanks.


Aliaksandr Andrasiuk staff commented 4 years ago

Hi,

Thank you for the response! We have a public repository for our free version on GitHub: https://github.com/mdbootstrap/React-Bootstrap-with-Material-Design/

I found there are many same issues exists with redux-form:

1) link

2) link

3) link

4) link etc..

Seems like you are right. F.e. ingshtrom described a problem similarly: link

You actually end up replacing the whole value. There is no way to update only a port of an inputs value. Even if it looks like you add one character, the DOM/browser/something-else-outside-of-your-control see's it as a whole value change.

As a solution gustavohenke suggested to convert Input from Component to PureComponent: link

Another solution is suggested by Daniel Billingham : link - just use defaultValue instead of value. But I'm not sure if it will not cause problems in the future.

We will find the best solution and test it.


Aliaksandr Andrasiuk staff answered 4 years ago


Hi,

Unfortunately, we have a lot of work to do and can't dive deep into this problem. But we work on this.

Of course, we will inform you if we will find the solution.

Thank you for the information about other issues.

Best regards.


Marek Cvrk free answered 4 years ago


Hello,

any progress on this? Please keep me updated as well when you find solution or workaround. For now we didn't find more issues with redux-form.

Thanks! Best regards.


Maurizio Silvano free answered 4 years ago


Hello,

I've the same behaviour with the mdbinput using redux to updating its value. The same code with a standard html input works correctly. Please keep me updated just you find the solution,

Thanks! Best regards.


Aliaksandr Andrasiuk staff commented 4 years ago

Hi,

We are working on finding the reason for this issue.


Aliaksandr Andrasiuk staff answered 4 years ago


Hi,

Unfortunately, we didn't find the reason for this behaviour. But we work on this.

Maybe you found other issues associated with redux-from? This info will be helpful for us.


Marek Cvrk free answered 4 years ago


Hi,

We also use redux-form in our production quite a lot at our company. And we encountered same problem and are still looking for way to fix it. Did you find some solution?

Thank you. Best regards.


Aliaksandr Andrasiuk staff answered 4 years ago


Hi,

That's an interesting case. For now, I can't get you the answer what is the reason of this problem.

I will try to find the reason of this behaviour and if I find I will write in this thicket.

Best regards.


Jozef Bíroš free answered 4 years ago


Hi thank you for your fast response. I investigated further and the problem occure when I control Input with redux. I am using redux-form, a problem occure when a connect MDBInput na redux. I tried connecting other inputs like from materiaul-ui and that works correctly. Sorry for bad english.

Here is code: https://codesandbox.io/embed/mdbinput-bug-ldswh?fontsize=14


Aliaksandr Andrasiuk staff answered 4 years ago


Hi, I tried to reproduce code with your problem but can't get any problems with the jumping cursor.

Here is the code :

import React, { useState } from "react";
import { MDBInput } from "mdbreact";

const InputPage = () => {
  let [value, setValue] = useState("");

  const onChangeHandler = e => {
    setValue(e.target.value)
    console.log(e.target.value)
  }

  return (
    <div style={{ width: "400px", padding: "20px" }}>
      <MDBInput
        label="Material input"
        onChange={onChangeHandler}
        value={value}
      />
    </div>
  );
};

export default InputPage;

What browser and version of the browser do you use?


Jozef Bíroš free commented 4 years ago

Hi thank you for your fast response. I investigated further and the problem occure when I control Input with redux. I am using redux-form, a problem occure when a connect MDBInput na redux. I tried connecting other inputs like from materiaul-ui and that works correctly. Sorry for bad english.

Here is code: https://codesandbox.io/embed/mdbinput-bug-ldswh?fontsize=14



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • ForumUser: Free
  • Premium support: No
  • Technology: MDB React
  • MDB Version: 4.13.0
  • Device: PC
  • Browser: Chrome
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: No