WIP: Fixes select option overflow

src/components/formControls/select/index.tsx

@@ -29,10 +29,55 @@ export interface Props {
   type?: Type
 }
 
+export interface OptionsPosition {
+  position: string
+  top: string
+  left: string
+}
+
 interface State {
   value: string | number
   selected: React.ReactNode
   show: boolean
+  optionsPosition: OptionsPosition
+}
+
+/* To do: Move all InetersectionObserver related interfaces to a d.ts file */
+
+interface Bounds {
+  height: number
+  width: number
+  top: number
+  left: number
+  right: number
+  bottom: number
+}
+
+interface IntersectionObserverEntry {
+  time: number
+  rootBounds: Bounds
+  boundingClientRect: Bounds
+  intersectionRect: Bounds
+  intersectionRatio: number
+  target: Element
+  isIntersecting: boolean
+}
+
+interface IntersectionObserver {
+  root: Element | null
+  rootMargin: string
+  thresholds: number[]
+
+  disconnect (): void
+  observe (target: Element): void
+  unobserve (target: Element): void
+  takeRecords (): IntersectionObserverEntry[]
+}
+
+interface IntersectionObserverOptions {
+  root: Element | null
+  rootMargin: string
+  threshold: number
 }
 
 /*
@@ -43,15 +88,21 @@ interface State {
   - add empty first choice?
  */
 export default class Select extends React.PureComponent<Props, State> {
+  private selectOptions: HTMLDivElement | null
+  private intersectionObserver: IntersectionObserver | null
+
   constructor (props: Props) {
     super(props)
 
     const obj = this.getDefaultValue(props)
     this.state = {
       value: obj.value,
       selected: obj.selected,
-      show: false
+      show: false,
+      optionsPosition: this.defaultOptionsPosition
     }
+    this.selectOptions = null
+    this.intersectionObserver = null
   }
 
   static defaultProps = {
@@ -130,7 +181,36 @@ export default class Select extends React.PureComponent<Props, State> {
     }
   }
 
+  get observerOptions (): IntersectionObserverOptions {
+    return {
+      root: null,
+      rootMargin: '0px',
+      threshold: 1.0
+    }
+  }
+
+  get defaultOptionsPosition (): OptionsPosition {
+    return {
+      position: 'absolute',
+      top: 'calc(100% + 4px)',
+      left: '0'
+    }
+  }
+
+  onSelectClip = (entries: IntersectionObserverEntry[], observer: IntersectionObserver) => {
+    entries.map((entry: IntersectionObserverEntry) => {
+      console.log({ entry })
+    })
+  }
+
   onSelectClick = () => {
+    if (!this.state.show && this.selectOptions) {
+      if (!this.intersectionObserver) {
+        this.intersectionObserver = new IntersectionObserver(this.onSelectClip, this.observerOptions)
+        this.intersectionObserver.observe(this.selectOptions)
+      }
+    }
+
     this.setState({
       show: !this.state.show
     })
@@ -142,6 +222,10 @@ export default class Select extends React.PureComponent<Props, State> {
     })
   }
 
+  refSet = (node: HTMLDivElement) => {
+    this.selectOptions = node
+  }
+
   render () {
     const { id, children, disabled, value, type, floating, showAllContents } = this.props
 
@@ -172,7 +256,9 @@ export default class Select extends React.PureComponent<Props, State> {
               </StyledSelectArrow>
             </StyledSelect>
             <StyledOptions
+              innerRef={this.refSet}
               show={this.state.show}
+              opts={this.state.optionsPosition}
               showAllContents={showAllContents}
             >
               {data}

src/components/formControls/select/style.ts

@@ -3,7 +3,7 @@
  * You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 import styled, { css } from 'styled-components'
-import { Props } from './index'
+import { Props, OptionsPosition } from './index'
 
 const getSelectColors = (p: StyleProps) => {
   let color = '#686978'
@@ -43,8 +43,11 @@ interface StyleProps extends Props {
   show?: boolean
   selected?: boolean
   showAllContents?: boolean
+  opts?: OptionsPosition
 }
 
+const getOptsAtt = (opts: any | undefined, att: string) => opts[att] || false
+
 export const StyledWrapper = styled<StyleProps, 'div'>('div')`
   width: 100%;
 `
@@ -83,9 +86,9 @@ export const StyledSelectText = styled<StyleProps, 'div'>('div')`
 `
 
 export const StyledOptions = styled<StyleProps, 'div'>('div')`
-  position: absolute;
-  top: calc(100% + 4px);
-  left: 0;
+  position: ${p => getOptsAtt(p.opts, 'position') || 'absolute'};
+  top: ${p => getOptsAtt(p.opts, 'top') || 'calc(100% + 4px)'};
+  left: ${p => getOptsAtt(p.opts, 'left') || '0'};
   width: ${p => p.showAllContents ? 'auto' : '100%'};
   border-radius: 3px;
   box-shadow: 0 2px 5px 0 rgba(223, 223, 232, 0.5);