Enterprise: Dropdowns do not close on tab press when using noSearch

[awbuboltz]

Describe the bug
When using noSearch: true on a dropdown control, tab does not close the list. Strangely, when tabbing BACK through and getting to that element, then pressing tab, it does close. I think it has to do with the active element at that point, which triggers the handleKeyDown() handler. When using the mouse to open the menu, only handlePseudoElemKeydown() fires.

I noticed in handlePseudoElemKeydown(), there is this code: (key === 'Tab' && this.isOpen()).
The issue is that it's within an if statement that requires ['ArrowDown', 'ArrowUp', 'Down', 'Up', 'Enter', 'Spacebar', ' '], so that code will never properly fire. Lower in the function, this code exists:

// Allow some keys to pass through with no changes in functionality if (isEscapeKey || key === 'Tab') { return true; }

That doesn't seem correct to me, pressing tab should always close the open menu when using noSearch I would think.

To Reproduce
Steps to reproduce the behavior:

1. Go to http://localhost:4000/components/dropdown/example-no-search-lsf.html
2. Use the mouse to open the menu, then press tab. The next dropdown is focused, but the menu doesn't close.

If you keep tabbing so that you cycle back through the page, the menu will close, which is coming from handleKeyDown, case 9:.

Expected behavior
When a dropdown is open, and tab is pressed, the menu should close and focus the next element available.

Version

• ids-enterprise: master

[awbuboltz]

I took a stab at fixing it and it seems to be working properly, basically moved a couple of existing lines around so that the noSearch logic can hit and pass through to handleKeyDown().

[tmcconechy]

Moving in for QA against the current sprint

[brianjuan]

https://4170-beta0-enterprise.demo.design.infor.com/components/dropdown/example-no-search-lsf.html
In Windows IE, when you press Tab, the dropdown on the first dropdown will close but the focus will not be moved to the next dropdown.

[tmcconechy]

I cant quite workout why this wouldnt work in IE. If no one else watching has any ideas, my suggestion is to just make a new minor issue for that. At least the list is closing which was the main issue

[awbuboltz]

Our team has found this too. I spent some time on it yesterday and just can't figure it out though. I also believe it's been that way for awhile, it wasn't the recent change that caused that.

[tmcconechy]

Same, i verified its running the same path but just refocuses the original dropdown on close.

[awbuboltz]

Any idea what the code around env.browser.isIE10() || env.browser.isIE11() is?

[tmcconechy]

https://github.com/infor-design/enterprise/blame/b81105dc1f2c6a2edcdbcf92966502d931a235a2/src/components/dropdown/dropdown.js#L1494

https://github.com/infor-design/enterprise/commit/f92943fcf5ea56ed460c0c3af070d2192ad6e0c1

Thats probably it

[awbuboltz]

Seems to work fine if all browsers just run use input[0].focus(); with no timeout.

[tmcconechy]

Ok, i'll push a change. Was going to pass isTabs variable in and not do the timeout otherwise as that was there for another bug

[awbuboltz]

Sounds good, I'll wait for your change and put the same in my branch.

[tmcconechy]

@awbuboltz Pushed a fix, see PR for details.

[janahintal]

QA Passed. Now working in Win10 IE11
Tested in: http://4170-rc0-enterprise.demo.design.infor.com/components/dropdown/example-no-search-lsf.html across all browsers