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

// 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