Angularjs: too much recursion error on custom directive

Question

I don't know if i should worry about this, i have been making a custom directive which dispatches a click event on a input[type="file"] when a div is clicked, everytime a file is chosen or the file selector dialog is closed the error shows in the console.

directive.js

module.directive("cropper", function(){
    return {
        restrict: "E",
        replace: true,
        templateUrl: "components/cropper/cropper-directive.html",
        link: link 
    };

    function link(scope, element, attr){
        var selector = element[0].querySelector(".cropper-selector");
        var input = element[0].querySelector(`input[type="file"]`);

        // Trigger file input select when selector detects a click
        selector.addEventListener("click", function(evt){
            var clickEvent = new MouseEvent("click", {
                bubbles: true,
                canceable: true
            }, false);

            input.dispatchEvent(clickEvent);
        });
    }
});

directive.html

<div class="cropper">
    <div class="cropper-image">
        <div class="cropper-selector">
            <label class="centered">Click or drop an image on this block</label>
            <input type="file"></input>
        </div>
    </div>

    <div class="cropper-actions"></div>
</div>

i have searched for solutions but all of the threats i have found are made only on jQuery and as you can see, i am using the native event listeners of Javascript, if this is something i should worry about, i would like to know the solution without using any jQuery method

UPDATE: i've forgot to mention that input has display: none so it would make the component look like a draggable drop files

I'm just wondering if input clicked -> cropper-selector also clicked? — grepLines
– grepLines, Commented Jun 12, 2017 at 0:29
@grepLines no, sorry for not showing that input has display none, i will update that — Oscar Reyes
– Oscar Reyes, Commented Jun 12, 2017 at 0:36
no I mean if you set the input to a click event, then it also means that cropper-selector also trigger that clicked? this causes recursion — grepLines
– grepLines, Commented Jun 12, 2017 at 0:39
@grepLines sorry, input has no programmed click listener rather than the default which is triggered from the container's click event — Oscar Reyes
– Oscar Reyes, Commented Jun 12, 2017 at 0:53

Thomas · Accepted Answer · 2017-06-12 01:24:55Z

1

selector.addEventListener("click", function(evt){
    var clickEvent = new MouseEvent("click", {
        bubbles: true, //<----
        canceable: true
    }, false);

    input.dispatchEvent(clickEvent);
});

your click event bubbles up to .cropper-selector and triggers there another click event wich causes another input.dispatchEvent(clickEvent); wich again bubbles up, and so on and so forth.

Do you know, that if you set your markup up like the following, you can get rid of the whole function link() and all it does?

<label class="cropper-selector">
    <div class="centered">Click or drop an image on this block</div>
    <input type="file"></input>
</label>

answered Jun 12, 2017 at 1:24

Thomas

12.8k1 gold badge16 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Oscar Reyes Over a year ago

i had no idea about bubbles stuff, thanks for the explanation

grepLines · Accepted Answer · 2017-06-12 01:28:56Z

0

Try this:

Option 1: change html slightly

   <div class="cropper-image">
        <div class="cropper-selector">
            <label class="centered">Click or drop an image on this block</label>
       </div>
       <!--new div-->
       <div>
            <input type="file"></input>
       </div>
  </div>

Option 2: Changes to your script

    selector.addEventListener("click", function(evt){
        var clickEvent = new MouseEvent("click", {
            bubbles: true,
            canceable: true
        }, false);

        input.dispatchEvent(clickEvent);
        event.stopPropagation(); //**add this line**
    });

Let me know if this works.

edited Jun 12, 2017 at 1:28

answered Jun 12, 2017 at 0:41

grepLines

2,5583 gold badges24 silver badges32 bronze badges

1 Comment

Oscar Reyes Over a year ago

Sorry for answering late, i had issues with network.. I have tried your first option before and yet somehow that triggers the same error, also i have tried your second option and still the error shows up, luckily the other answer did solve the problem and i understood how this works better

Collectives™ on Stack Overflow

Angularjs: too much recursion error on custom directive

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related