Input fields lock up under certain circumstances

I have a basic page with a header bar, content and modal. The header bar has a button that opens up the modal. Inside the modal is a list of input boxes that are generated using ngRepeat.

When you open up the modal, the input boxes can be modified just fine. BUT, if you scroll the main page then open the modal, some of the input boxes lock up and are unmodifiable. It seems to be only the input boxes towards the bottom of the screen that get affected.

I have created a plnkr to illustrate the issue: http://plnkr.co/edit/ZjuncNw54Ax5bT1FCMN1?p=preview

Am I doing something wrong or is this a bug because I’m not getting any errors in the console? Thanks in advance. One last thing, I can seem to only replicate this issue in Chrome. It even works OK in IE.

This is due to the cloned input fields. A quick-fix is to comment out the following:

.cloned-text-input+input,
.cloned-text-input+textarea,
.previous-input-focus {
  position: absolute;
  left: -9999px;
  width: 200px
}

Change it to

.cloned-text-input{
  display:none;
}

Edit: you can also add the !important tag to the css if it doesnt work.

2 Likes

Hi thanks for the response. This didn’t fix the issue however it looks like it is the cloned inputs causing the issue and I’ll see if I can find a solution. I’ll post my findings if any.

1 Like

Definitely a bug. I noticed when the content is scrolled, the input fields are cloned and moved off screen so they cannot be modified. When the content is finished scrolling, the clones should be removed and the original input fields put back in place.

Some input fields get stuck in the cloned mode and don’t go back to the way they were before. Can someone please investigate this issue and suggest a solution? I’ll also do some digging. I’ve done a simpler example to reproduce the issue.