Blur and focus events don't work

<script>
  export default (props, { $f7route, $store, $on }) => {
    
    $on('input', (p1) => {
      console.log('input textxarea ' +p1.data+' '+p1.target.id);
    });

    $on('blur', (p1) => {
      console.log('blur' +' '+p1.target.id);
    });

    $on('focus', (p1) => {
      console.log('focus' +' '+p1.target.id);
    });

    $on('change', (p1) => {
      console.log('change' +p1.target.id);
    });

    return $render;
  };
</script>

Hi. Getting acquainted with framework 7. Can smb say, why In the code above input and chage events work, but focus and blur not. There is a textarea input in the template.

     <li class="item-content item-input">
            <div class="item-media">
              <i class="icon demo-list-icon"></i>
            </div>
            <div class="item-inner">
              <!-- <div class="item-title item-label">Word0</div> -->
              <div class="item-input-wrap">
                <textarea id="word2" class="resizable" placeholder="Word2 word2"></textarea>
                <span class="input-clear-button"></span>
              </div>
            </div>
          </li>
$("#target").on( "focus", function() {
  alert("Handler for `focus` called.");
} );
1 Like