ClickOutside

The ClickOutside component is used to detect when the mouse is clicked outside the calendar.

In the default implementation ClickOutside is used to determine when to close the Calendar when rendered inside a Popper. Clicks within the Calender or on the associated inputs should not close the Calendar but everywhere else should.

Example

In this example when you click the buttons they log whether or not it considers it a click outside the rendered tree. In addition an ignored list of refs can be provided which, when clicked, will not invoke onClickOutside.

() => {
  const ignoreRef = useRef()
  const ignoreListRefs = [ignoreRef]
  function handleClickOutside() {
    console.log('you clicked outside the component')
  }
  return (
    <>
      <ButtonBar>
        <Button>Click Outside</Button>
        <Button ref={ignoreRef}>Click Outside (but in the allow list)</Button>
      </ButtonBar>
      <ClickOutside
        onClickOutside={handleClickOutside}
        ignoreClickOutsideRefs={ignoreListRefs}
      >
        <Button style={{ margin: '8px' }}>Click Inside</Button>
      </ClickOutside>
    </>
  )
}

Props