How do you use JQuery UI menu with ENTER key

Question

Can you tell me How do you use JQuery UI menu with ENTER key?

Answer 1

To properly implement ENTER key functionality in a jQuery UI Menu, follow this comprehensive approach:

Complete Solution:

$(function() {

  $("#menu").menu({

    select: function(event, ui) {

      alert("Selected: " + ui.item.text());

     focus: function(event, ui) {

      if (event.originalEvent && event.originalEvent.type === "keydown") {

        $(this).scrollTop(ui.item.offset().top - $(this).offset().top);

      }

    }

  });


  $("#menu")

    .attr("tabindex", 0)  // Make menu focusable

    .on("keydown", function(e) {

      // Handle ENTER key (keyCode 13)

      if (e.keyCode === $.ui.keyCode.ENTER) {

        var activeItem = $(this).find(".ui-state-focus");

        if (activeItem.length) {

          activeItem.trigger("mouseup"); // Simulate click

          e.preventDefault();

        }

      }

    });

});


HTML Structure

<ul id="menu">

  <li><div>Menu Item 1</div></li>

  <li><div>Menu Item 2</div></li>

  <li>

    <div>Submenu</div>

    <ul>

      <li><div>Submenu Item 1</div></li>

      <li><div>Submenu Item 2</div></li>

    </ul>

  </li>

</ul>