[SOLVED] textarea focusout not working when clicking into sortable list

textarea focusout not working when clicking into sortable list

I've searched pretty extensively, so forgive me if this has been covered somewhere else. Consider this small program, which demonstrates the problem I'm trying to solve. I would like the .focusout() event to trigger when one clicks out of the textarea box to the sortable list. It triggers pretty much everywhere outside the textarea but the list. Any thoughts?

    <!DOCTYPE HTML>
    <html>
    <head>
    <style>
    textarea {
      width:90px;
      height:90px;
    }

    #la {
      width:90px;
      height:90px;
      border:1px solid black;
    }

    ul {
      margin:0;
      list-style-type: none;
    }

    li {
      border:1px solid black;
    }
    </style>
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
    <script>
    $( document ).ready(function() {
      $("#la ul").sortable();
    });

    $( document ).ready(function() {
      $("#ta").focusout(function(){
        alert("out");
      });
    });

    </script>
    </head>

    <body>
    <div id="la">
    <ul>
      <li>Coffee</li>
      <li>Tea</li>
      <li>Milk</li>
    </ul>  
    </div><br>
    <div id="cont">
    <textarea id="ta">123456</textarea>
    </div>
    </body></html>

Solution

That is a strange behavior of jQuery-ui... Can't explain.

But if you are interested by a walk-around, you can trigger a .blur() on mousedown on a sortable element.

$(".ui-sortable-handle").on("mousedown", function(){
  if( $("#ta").is(":focus") ){ 
    $("#ta").blur();
  }
});

See here.

And, by the way, only one ready wrapper is enought around your functions.