[terra-form-select] Non-enabled and invisible content is interactable and causing inconsistent hovers

Bug Report

Description

Hookshot’s API provides an isEnabled property that can be toggled on and off. When isEnabled is false the content is positioned in the top left corner of the screen with an opacity of 0 to make it invisible to users. The invisible content is mouse interactable and overlays the screen.

Steps to Reproduce

Here’s a sample code sandbox: https://codesandbox.io/s/eager-maxwell-spi0e

1. Open the code sandbox.
2. Click around on the example page, but do not click the button to open hookshot yet.
3. Observe all of the click events are being counted.
4. Click the button to open hookshot.
5. Attempt to click anywhere on the page.
6. Observe the click count is not changing, but the background color is.

This example demonstrates interacting with invisible hookshot content. The invisible content is overlayed on top of the visible content. The visible content is no longer interactable. Any attempt to interact with it will interact with the invisible hookshot content.

Additional Context / Screenshots

This issue came up with the Select component. Opening the terra-form-select would occasionally cause inconsistent results with the hover interactions of the dropdown menu. Opening the Select dropdown would appear to cause a hover interaction with the list of options. This was happening because the the invisible dropdown content is still interactable and would invoke a mouse enter event on the non-enabled dropdown.

Expected Behavior

Invisible content should not be mouse/keyboard interactable.

Possible Solution

Set the default style of the hookshot content to pointer-events: none when invisible. Note: This is not fully supported in IE 10. An overlay or different combination of CSS may be necessary.

[supreethmr]

As isEnabled only dictates if its being actively positioned, so if it’s open and positioned, setting isEnabled back to false doesn’t re-hide it.

I was not aware of this and assuming setting isEnabled false will re-hide the hookshot. Well then it makes sense to add inert changes in form-select. while testing inert logic I found a scenario where focus was not setting to ul menu element even after removing inert from hookshot div.

Due to this focus still remains on frame even when dropdown is open. this prevents dropdown from closing on placeholder click as shown in below image. (we can see that active element still points to frame div instead of ul menu on dropdown open.

Focus to ul menu is set by moveFocusToDropDown method in frame. but programmatic focus doesn’t seems to be set focus on ul menu after removing inert element from its parent element (hookshot-div).

After some investigation around inert i found similar issue in wcig-inert where it fails to restore tab-index on elements like ul, li and ol on removing inert from the element.

To fix this issue of focus not setting on ul menu on open we might need to restore the tab-index by resetting the tab-index of ul element after removing inert from div like below.

 this.selectMenu.setAttribute('tabIndex', '0');

Since we require this change as well I think form-select would be the right place to add inert logic to fix this issue. we can add inert to dropdown before it is positioned and remove inert when dropdown is positioned.

[lokesh-0813]

The issue is addressed within terra-form-select. Hence is moved from terra-framework to terra-core.

Issue title and description will be suitably modified.