Skip to content
This repository has been archived by the owner on Sep 1, 2020. It is now read-only.

fix issue 168: Menu doesn't close when press 'Enter' #170

Merged
merged 1 commit into from
Nov 29, 2017
Merged

fix issue 168: Menu doesn't close when press 'Enter' #170

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 5 additions & 1 deletion src/AbstractMenu.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,8 +45,12 @@ export default class AbstractMenu extends Component {
case 13: // enter
e.preventDefault();
this.tryToOpenSubMenu(e);
if (this.seletedItemRef && this.seletedItemRef.ref instanceof HTMLElement) {
if (this.seletedItemRef &&
this.seletedItemRef.ref instanceof HTMLElement &&
!this.seletedItemRef.ref.props.disabled) {
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

AFAIK if this.seletedItemRef.ref instanceof HTMLElement is true , this.seletedItemRef.ref.props will not exist since it will not refer to a ReactElement. Correct me if I'm wrong,

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

not exactly, I think. Below is the console output of this.selectedItemRef:
screen shot 2017-11-29 at 1 56 01 pm

Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can you please, also show the output for this.seletedItemRef.ref instanceof HTMLElement??

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more. 

      case 13:
        // enter
        e.preventDefault();
        _this2.tryToOpenSubMenu(e);
        console.log("handleKeyNavigation es6");
        console.log(_this2.seletedItemRef);
        if (_this2.seletedItemRef) {
          console.log("_this2.seletedItemRef.ref instanceof HTMLElement");
          console.log(_this2.seletedItemRef.ref instanceof HTMLElement);
        }

        if (
          _this2.seletedItemRef &&
          _this2.seletedItemRef.ref instanceof HTMLElement &&
          !_this2.seletedItemRef.props.disabled
        ) {
          _this2.seletedItemRef.ref.click();
        } else {
          console.log("hideMenu");
          _this2.hideMenu(e);
        }
        break;

screen shot 2017-11-29 at 2 08 36 pm

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this.seletedItemRef.ref instanceof HTMLElement is true

Copy link
Contributor Author

@WaterDesk WaterDesk Dec 1, 2017 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@vkbansal I am afraid I made a mistake in this PR. The code change in my local to determine the disabled status of the menuitem is !_this2.seletedItemRef.props.disabled. But there was a typo in the PR: !this.seletedItemRef.ref.props.disabled. I will create another PR. Very sorry for my mistake.

Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@WaterDesk no issues

this.seletedItemRef.ref.click();
} else {
this.hideMenu(e);
}
break;
default:
Expand Down
2 changes: 1 addition & 1 deletion src/ContextMenu.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -143,7 +143,7 @@ export default class ContextMenu extends AbstractMenu {
}

hideMenu = (e) => {
if (e.keyCode === 27) { // enter
if (e.keyCode === 27 || e.keyCode === 13) { // ECS or enter
hideMenu();
}
}
Expand Down
24 changes: 24 additions & 0 deletions tests/ContextMenu.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -115,6 +115,30 @@ describe('ContextMenu tests', () => {
component.unmount();
});

test('menu should close on "Enter" when selectedItem is null', () => {
const data = { position: { x: 50, y: 50 }, id: 'CORRECT_ID' };
const onHide = jest.fn();
const component = mount(<ContextMenu id={data.id} onHide={onHide} />);
const enter = new window.KeyboardEvent('keydown', { keyCode: 13 });

showMenu(data);
expect(component.state()).toEqual(
Object.assign(
{ isVisible: true, forceSubMenuOpen: false, selectedItem: null },
data.position
)
);
document.dispatchEvent(enter);
expect(component.state()).toEqual(
Object.assign(
{ isVisible: false, forceSubMenuOpen: false, selectedItem: null },
data.position
)
);
expect(onHide).toHaveBeenCalled();
component.unmount();
});

test('menu should close on "outside" click', () => {
const data = { position: { x: 50, y: 50 }, id: 'CORRECT_ID' };
const onHide = jest.fn();
Expand Down