jqueryformszurb-foundation-6lostfocuszurb-reveal

Foundation6 reveal popup form field unwanted focus lost (in jQuery events?)

I'm coding popup form using Foundation6 reveal. I'm facing JavaScript problem I have traced has probably something to do with jQuery.js / Foundation.js event binding or handling.

screenshot from codepen

When I click the text field (or any other field) in reveal window the field gets focus and then the reveal window quickly hides and shows again and the field has lost the focus. The reveal window also changes it position on the screen. Only way to access text fields is using tab-key.

index.html:

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.2.4/foundation.css"/>    
        <script src="https://code.jquery.com/jquery-3.1.1.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.2.4/foundation.js"></script>
        <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
        <script src="app.js"></script>   
    </head>
    <body>
        <section class="container clearfix">
            <h3>Click button to open modal and test focus lost problem:</h3>
            <p><a href="modalform.html" class="button" data-open="newFormModal" data-showloading="1">Test focus modal form</a></p>
        </section>
        <div class="reveal" id="newFormModal" data-reveal data-close-on-click><section class="modalContent"></section><button class="close-button" data-close aria-label="Close reveal" type="button"><i class="fi-x"></i></button></div>
    </body>
</html>

modalform.html

<h3 class="modalheader">PopupForm</h3>
<form method="post" accept-charset="utf-8" class="ajaxModal" data-showloading="1" data-open="newFormModal" action="/test/modalform3">
  <div style="display:none;"><input type="hidden" name="_method" value="POST" /></div>
  <div class="input text"><label for="ga-20x28">Product 1 qty:</label><input type="text" name="ProductQuantities[726][value]" id="ga-20x28" value="0" /></div> <input type="hidden" name="ProductQuantities[726][name]" value="GA 20x28" />
  <div class="input text"><label for="ga-30x40">Product 2 qty:</label><input type="text" name="ProductQuantities[727][value]" id="ga-30x40" value="0" /></div> <input type="hidden" name="ProductQuantities[727][name]" value="GA 30x40" />
  <div class="input text"><label for="ga-50x70">Product 3 qty:</label><input type="text" name="ProductQuantities[728][value]" id="ga-50x70" value="0" /></div> <input type="hidden" name="ProductQuantities[728][name]" value="GA 50x70" />
<button type="submit">Next</button>
</form>
<button data-close="" class="refreshId" type="submit">Close</button>

app.js:

$(document).ready(function() {

    $(document).foundation();

    $("body").on("click", "a[data-open]", function(e) {
        e.preventDefault();

        var $this = $(this);
        var modalName = $this.data("open");
        var $modal = $("#" + modalName);
        var $target = $modal.children(".modalContent");
        var requestUri = $(this).attr('href');
        var requestData;
        var method;
        if($this.attr('data-request')) {
            requestData = $(this).data("request");
            method = 'POST';
        } else {
            requestData = "";
            method = 'GET';
        }


        // Load content:
        var request = $.ajax({
            url: requestUri,
            method: method,
            data: requestData,
            dataType: "html",
            timeout: 60000
        });

        request.done(function(response) {
            $target.html(response);
            $target.foundation();
        });
    });
});

Here you can test the behavior (at least on my browsers Firefox & Chrome): [http://codepen.io/repeat_spacer/pen/bBRZKd][1]. Open the reveal popup window from button and try to change the value of any text field. It's not possible to enter the field with mouse click.

Hope somebody can point me the problem or how to continue tracing it.

UPDATE:

I cleaned the modalform.html code (there is some ajax reveal load new form stuff, I have there to ajax load next form). So now the "load next form" functionality is not working, but in the other hand the "focus lost" behavior dissapeared.

modalform_updated.html:

<h3 class="modalheader">PopupForm</h3>
<form method="post" accept-charset="utf-8" class="ajaxModal" action="submitmodal.php">
  <div style="display:none;"><input type="hidden" name="_method" value="POST" /></div>
  <div class="input text"><label for="p1qty">Product 1 qty:</label><input type="text" name="ProductQuantities[p1][value]" id="p1qty" value="0" /></div>
  <div class="input text"><label for="p2qty">Product 2 qty:</label><input type="text" name="ProductQuantities[p2][value]" id="p2qty" value="0" /></div>
  <div class="input text"><label for="p3qty">Product 3 qty:</label><input type="text" name="ProductQuantities[p3][value]" id="p3qty" value="0" /></div>
  <button type="submit">Submit</button>
</form>
<button data-close="" class="refreshId" type="submit">Close</button>

Updated codepen: http://codepen.io/repeat_spacer/pen/MbrYvj

UPDATE 2:

Here is the reason why I have data-open (Foundation Reveal open-attribute) in form attributes. It seems to be the cause of the behavior cause it triggers Foundation Open event, when a field in form is clicked. So quick fix would be filtering it out some dirty way.

Here is fiddler with the multi popup functionality i want to have: http://codepen.io/repeat_spacer/pen/JbMdPm (1st popup modal ajax loads next pop up content in same modal)

Solution

  • Okay I now got it working. Like wondered the problem was in Foundation event binding.

    I was thinking some fancy generality, when I added data-open="modalName" in the form attributes to indicate that in which modal I want Ajax to load the next modal page (just like I need to do in the first button to reveal the modal window.)

    Now when the data-open is in form attributes, It triggers reveal open event every time something in the form is clicked. The event will close all reveals and then open the reveal with id in data-open attribute and that leads to loosing the focus.

    I now saved the modal name to data-modalname and everything is working like expected.

    HTML modification:

    <form method="get" accept-charset="utf-8" class="ajaxModal" data-showloading="1" data-modalname="this" action="modalform2.html">

    And then changing the event handler in JS to read the modal name from there.

    Working CodePen: http://codepen.io/repeat_spacer/pen/QGazJj