Not able to write in text Input inside modal

[lexx27]

I tested it in multiple browsers.

When I open a modal with an text input inside, I am not able to write in it. It happens randomly though.

No errors on the console.

[gakimball]

Can you post a code sample?

[lexx27]

Of course!

This is the trigger:

<div class="top-bar-right">
    <button class="button" data-toggle="new-story-modal">Create a new story</button>
</div>

This is the modal:

<div class="full reveal" id="new-story-modal" data-reveal data-close-on-click='true' data-animation-in='fade-in' data-animation-out='fade-out'>
    <h1>Whoa, I'm dizzy!</h1>

    <p class="lead">There are many options for animating modals, check out the Motion UI library to see them all</p>

    <form id="new_story_form" action="/anaction" method="post">
        <input type="hidden" name="status" value="2">
        <input type="text" name="title" value="" required> <!-- here is the problem -->
        <button type="submit" class="button">Start writing</button>
    </form>

  <button class="close-button" data-close aria-label="Close reveal" type="button"><span aria-hidden="true">&times;</span></button>
</div>

For example the modal opens correctly. But I am unable to use the keyboard inside the field. Even if I add a value from the html, I am unable to remove text with backspace or delete...

In order to replicate try to open and close the modal a few times.

The problem exists in this jsfiddle too!

https://jsfiddle.net/1tpoz03a/

[robinsue]

I've encountered the same issue. I noticed this only occurs when you use the data-animation attributes.

[lexx27]

Ok. Some more info:

1. I open the modal. I focus on the input and I write. AOK. Then, I close the modal while I had my focus ON the input. Then I open the modal again and I cant write.
2. While on the "I can't write situation", if I focus out of the input and then again inside, I am able to write again.
3. While on the "I can't write situation", if I focus out of the input and try to close the modal. The modal doesn't respond. If I then focus on the input, the modal closes!!! toing!

I think this piece of code is responsible

/js/foundation.reveal.js line 362

open: function() {
          if ($target.is(visibleFocusableElements)) { // dont't trigger if acual element has focus (i.e. inputs, links, ...)
            this.open();
          }
        },

[lexx27]

@robinsue You are correct. If I remove the animation attributes it works fine

[artisson]

Hi!,
I have the same problem with input in animated reveal.
It works fine without animation.

To add my two cents for a solution, when a user a minified version of foundation.js, i get the following warning in the console : "component not defined!", but not with a no warning with the non minified version.

[megakoresh]

Aye. Exactly the same problem here. I did some digging. This has to do with the background overlay. When you set data-overlay="false" it works fine with the animation as well. Plz fix :O

[lexx27]

@Owlbertz Your codepen.io version still has the problem :(. It occured to me on the 3rd time I opened it

[Owlbertz]

@lexx27 Yep, just found out that I referenced the wrong version in the pen. Sorry for that and the confusion. But as mentioned in the (now deleted) comment, this is caused by the minified version. I will dig into it later today and fix this as this has already been an issue earlier (that I believe I had already fixed...).

[lexx27]

@Owlbertz No problem. Thanks a ton :)