Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Typing is garbled in IE11 #99

Closed
insin opened this issue May 3, 2016 · 12 comments
Closed

Typing is garbled in IE11 #99

insin opened this issue May 3, 2016 · 12 comments
Labels

Comments

@insin
Copy link

insin commented May 3, 2016

Typing "Typing a test message" (and messing it up the second time 😸) with react/react-dom@15.0.2 and react-textarea-autosize@4.0.1:

react-textarea-autosize-ie11

The event handler isn't doing anything asynchronous:

  handleTextChange(e) {
    this.setState({text: e.target.value})
  },

This only seems to happen when the component is controlled - working around it by using it without a value prop. as that suits my current use case.

@andreypopp andreypopp added the bug label May 3, 2016
@insin
Copy link
Author

insin commented May 4, 2016

Is the purpose of this line in componentWillUpdate() to resize the textarea when it's controlled and a new value is forced into it via a prop, rather than by using the textarea?

this._onNextFrameActionId = onNextFrame(this._resizeComponent);

Commenting this out makes IE11 behave when typing normally - could it be a difference in how IE implements requestAnimationFrame?

andreypopp added a commit that referenced this issue May 5, 2016
@andreypopp
Copy link
Collaborator

Can you try code in controlled branch? I removed rAF call there and simplified code to allow only controlled usage (also removed support for valueLink pattern).

@insin
Copy link
Author

insin commented May 5, 2016

Looks good to me in IE

controlled-branch

@andreypopp
Copy link
Collaborator

Ok, I'll wait for feedback on #100 a little bit and then release it (or not :-)).

@averyvery
Copy link

We also have users experiencing this issue, glad someone caught it!

@averyvery
Copy link

Any updates on this? Is it ready to merge?

@frontendphil
Copy link

I would also like to see that being merged / fixed :) I'll have to disable this feature now, because I cannot ship to customers otherwise.

@xylude
Copy link

xylude commented Sep 8, 2016

I had this problem in an application, not with just this module, but regular text inputs too. React made a change in v15 to how the change event is handled in IE11 and below - my solution was just to change the 'onChange' event to 'onInput'. After that everything worked just fine.

@Andarist
Copy link
Owner

@andreypopp
what did happen with controlled branch? I dont see it included in the master and it got deleted I think, is there a plan to release it? I had to fork the repo and merge controlled in the past so I can ship my app without this bug, but would like to eventually include the original lib instead of a fork

@andreypopp
Copy link
Collaborator

@Andarist see #100 also I've stepped down as a maintainer of react-textarea-component so @jdalton makes the call here

@vinnymac
Copy link

I noticed that some changes were made in React for IE 11 in the latest release (v15.4.2).

We might want to recheck these IE 11 bugs given React has resolved issues of its own regarding textarea elements.

#125 may also be affected.

@Andarist
Copy link
Owner

I had problem with this too, after some PRs merged in and new release today Ive just tested it (manually ofc) on the computer with IE11 which was affected before bumping library version and the problem seems to be gone.

Other popped up, but aint sure if new. At least typing is not more garbled (for me). Going go to close this issue, but if anyone still suffers from this problem at the newest version of the library then please raise your voice, I will reopen and do my best to fix this.

amireh added a commit to amireh/react-textarea-autosize that referenced this issue Aug 30, 2017
refs AndaristGH-99

Maintaining a reference to "requestAnimationFrame" and friends
(including setTimeout) without binding them to the window object seems
to make IE angry with an exception similar to:

    TypeError: Invalid calling object

Binding the function references to window fixes the issue.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

7 participants