CODEWITHSUNDEEP
jquerytextareajquery-ui-sortablefocusout
user2452922
user2452922

Reputation: 173

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>

Upvotes: 1

Views: 1494

Answers (2)

user2452922
user2452922

Reputation: 173

Thanks Louys! This works. Following on your logic, I can also add a line to the sortable block:

    start: function() {if ($("#ta").is(":focus")) $("#ta").blur();}

...although this only works if an actual sort is performed.

Upvotes: 0

Louys Patrice Bessette
Louys Patrice Bessette

Reputation: 33933

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.

Upvotes: 3

Related Questions