search

vaadin / vaadin-context-menu

The responsive Web Component for showing context dependent items for any element on the page. Part of the Vaadin components.
https://vaadin.com/components
Apache License 2.0
26 stars 10 forks source link

Added support for keyboard control of menu item #277

Closed xmicore closed 3 years ago

xmicore commented 4 years ago

This pull request resolves #279.

CLAassistant commented 4 years ago

CLA assistant check
All committers have signed the CLA.

xmicore commented 4 years ago

An anchor in a menu item could not be controlled via the keyboard. A simple link in the menu is a bigger issue.

web-padawan commented 4 years ago

Sorry about the delay, our team has quite limited capacity at the moment.

In the meanwhile, I created a workaround that can be added to the project to monkey patch vaadin-item :see_no_evil: 

const ItemElement = customElements.get('vaadin-item');

if (ItemElement) {
  // store the original method
  const onKeyUp = ItemElement.prototype._onKeyup;

  ItemElement.prototype._onKeyup = function(event) {
    const item = Array.from(event.composedPath()).filter(el => el instanceof ItemElement)[0];
    const willClick = item.hasAttribute('active');

    // call the original method
    onKeyUp.call(item, event);

    if (willClick) {
      const anchor = item.querySelector('a');
      if (anchor) {
        anchor.click();
      }
    }
  };
}
rolfsmeds commented 3 years ago

This would need a unit test -- see the corresponding unit test for Tabs for inspiration: https://github.com/vaadin/vaadin-tabs/commit/b657fa235d86590fc39d690d5a6e848b9a8b7e97#diff-6fcdd3aebeb3be69481f063aaed32b8017c4a4a588cd01223e26ddb8d9a03da9

web-padawan commented 3 years ago

It has been a while since this PR was submitted. Apologies about keeping it open for so long without any progress. Please note, the new development for Vaadin web components will happen in the monorepo.

I'm closing this now. We will submit a new PR to the monorepo when the linked issue is prioritised.