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

PreviousWk-notes-11-08-living-pricing-arch NextWk-notes-11-06-bug-race-virtual-dom-diff

Last updated 5 years ago

Was this helpful?

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

Virtual box IE/Edge testing

install virtual box
download image from (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 , 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. 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();
  }
}

II. 1.AtlasKit

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

Ref: AtlasKit

III. react-focus-lock TODO

PreviousWk-notes-11-08-living-pricing-arch NextWk-notes-11-06-bug-race-virtual-dom-diff

Last updated 5 years ago

Was this helpful?