> For the complete documentation index, see [llms.txt](https://notes.lirenxn.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://notes.lirenxn.com/2019-1/wk-notes-11-07-vitual-box-n-onblur-for-div.md).

# Wk-notes-11-07-vitual-box-n-onblur-for-div

## Virtual box IE/Edge testing

* install virtual box
* download image from <https://developer.microsoft.com/en-us/microsoft-edge/tools/vms/> (virtual machines includes certain browsers for testing only), ⚠️the image will expire, use virtual box snapshot to rollback when expired.
* create virtual box from image
* ⚠️due to license issue, the system and browser in virtual box looks very old style
* we can connect the virtual box browser to host machine `localhost`, it will not work right away, do `ipconfig` and get the **gateway ip** as <http://10.0.2.2>, use that to get access from host machine localhost
* Test it!

## To achieve similar onBlur effect for a div

`blur` and `focus` event do **NOT** bubble, but they can be captured. <https://javascript.info/bubbling-and-capturing> `focusin` and `focusout` **WILL** bubble tho.

To achieve **PopupClickAway**, which close the popup when click/focus on somewhere else in the page.

**Common practices:**

**I. Material-ui** `ClickAwayListener`**:**

Add EventListener on `focusin`, and `click`

```javascript
// onEnter(){  
// onOpen(){
onMount(){ 
  document.addEventListener('click', this.handleOutsideInteraction);
  document.addEventListener('focusin', this.handleOutsideInteraction);
}

// onExit(){  
// onClose(){
onUnMount(){  
  document.removeEventListener('click', this.handleOutsideInteraction);
  document.removeEventListener('focusin', this.handleOutsideInteraction);
}

handleOutsideInteraction(event){
  // Check if the click/focus event is happening inside of the wrapper element
  if(this.wrapperEL && !this.wrapperEL.contains(event.target)){
    // if event is not in wrapper, do onBlur
    this.props.handleOnBlur();
  }
}
```

**Ref:** Material-ui **ClickAwayListener** <https://github.com/mui-org/material-ui/blob/2bcc874cf07b81202968f769cb9c2398c7c11311/packages/material-ui/src/ClickAwayListener/ClickAwayListener.js>

**II. 1.AtlasKit**

* is using programmtically focus control for every key stroke 'Tab'
* is using  - `document.addEventListener('click')` to manage click outside

**Ref:** AtlasKit

* **DropdownItemFocusManager**  <https://bitbucket.org/atlassian/atlaskit-mk-2/src/7edf0dd462ed881f379e05b926c5209e7822bdf0/packages/core/dropdown-menu/src/components/context/DropdownItemFocusManager.js#lines-109>
* **Droplist** <https://bitbucket.org/atlassian/atlaskit-mk-2/src/7edf0dd462ed881f379e05b926c5209e7822bdf0/packages/core/droplist/src/components/Droplist.js#lines-114>

**III**. `react-focus-lock` TODO