fixes hold and scroll issue of form-select in IE #1863

[supreethmr]

Summary

Prevent terra-form-select from closing onClick of scroll bar in IE.
Resolves #1863

Additional Details

Hold and Scroll issue exist only on IE. When ever user tries to hold and scroll or try to click on arrow icons of scrollbar on form-select-dropdown, dropdown window was getting disappear.

IE was not able to recognize scroll bar as part of form-select-dropdown div hence it was removing focus from the component on click of scroll bar and functionality has been written to hide the dropdown when it loses focus by calling close dropdown on blur event.

To prevent IE from removing the focus from component on click of scroll bar, below Condition has been added to see on onBlur event whether dropdown is still active element or any part of dropdown is active before calling close drop-down method in onBlur event.

if (this.dropdown && (this.dropdown === document.activeElement && this.dropdown.contains(document.activeElement))) { this.focus(); return; }

Onblur event of form-select-dropdown will fire only when it loses focus on all other browsers hence this issue was not seen in any of the browsers like chrome, firefox, edge and safari.

Only IE was firing Onblur event on click of scrollbar of dropdown hence added check on Onblur event to prevent dropdown from getting hidden.

[terra-bot]

	Fails
🚫	Please include a CHANGELOG entry with this PR.

Generated by 🚫 dangerJS

[supreethmr]

Updated eslint-config-terra to latest version 2.1.0 since 2.0.0 was giving error on npm run lint:js.
Added dependencies eslint-plugin-react : 7.11.0 explicitly since by default it was referring to 7.12.0 which was leading to below error :
AssertionError [ERR_ASSERTION]: Node must be provided when reporting error if location is not provided at assertValidNodeInfo (/Users/sm051274/Documents/GitHub/terra-core/node_modules/eslint/lib/util/report-translator.js:96:9)

[emilyrohrbough]

I have a PR for this to lock down the eslint-plugin-react version in the eslint-config-terra module: cerner/eslint-config-terra#19

[bjankord]

Just released estlint-config-terra v2.2.0 which has the change @emilyrohrbough mentioned. We can switch this to ^2.2.0.

[supreethmr]

Updated version with ^2.2.0 : https://github.com/cerner/terra-core/pull/2138/files#diff-32052204d6a35b2810d45b5391d555ed

[StephenEsser]

Is the version change still necessary for this PR?

[StephenEsser]

cc: @supreethmr

[supreethmr]

it's not need. It was added to pass travis build previously.
Reverted back to ^2.0.0 : 6ee41f0

[StephenEsser]

this.focus() throws an error in IE. Focus will need to be called on a ref to the appropriate element. ( this.select or this.input depending on the variant type )

One concern I have about this approach is the focus callbacks. onFocus is a first class prop on the Select. I don't think we'll want the users onFocus callback fired with this approach.

<Select onFocus={() => { console.log('focus'); }} />

[supreethmr]

Removed this.focus() and just kept return inside if() block since there is no need to set focus back to prevent dropdown from closing. All I need to do was just to skip closeDropdown() from executing so that dropdown remains open on click of scroll bar . Hence updated handle blur like below :
if (this.dropdown && (this.dropdown === document.activeElement && this.dropdown.contains(document.activeElement))) { return; }

[ShettyAkarsh]

Hi All,

Requesting you guys to review this PR.

[StephenEsser]

These === may be a result of resolving conflicts. They are appearing in the generated readme and should be removed.

[supreethmr]

removed.

[supreethmr]

Requesting to please review the code changes for Issue #1863.