Selaa lähdekoodia

Fix dropdown list position

Occasionally the dropdown list would appear to the left of its
corresponding button by a few pixels.
To reproduce this issue open a dropdown that doesn't fit in the page
(i.e. days of the month in the schedule). The dropdown list would also
snap to the correct position at the next DOM update.
Sergiu Miclea 8 vuotta sitten
vanhempi
sitoutus
e87f57846d
3 muutettua tiedostoa jossa 3 lisäystä ja 31 poistoa
  1. 0 1
      package.json
  2. 3 4
      src/components/molecules/Dropdown/Dropdown.jsx
  3. 0 26
      yarn.lock

+ 0 - 1
package.json

@@ -61,7 +61,6 @@
     "babel-register": "^6.26.0",
     "copyfiles": "^1.2.0",
     "cross-env": "^5.0.5",
-    "document-offset": "^1.0.4",
     "express": "^4.16.1",
     "file-loader": "^1.1.5",
     "fs": "^0.0.1-security",

+ 3 - 4
src/components/molecules/Dropdown/Dropdown.jsx

@@ -16,7 +16,6 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import styled from 'styled-components'
 import ReactDOM from 'react-dom'
-import offset from 'document-offset'
 
 import { DropdownButton } from 'components'
 
@@ -117,6 +116,7 @@ class Dropdown extends React.Component {
 
   componentDidMount() {
     window.addEventListener('mousedown', this.handlePageClick, false)
+    this.buttonRect = this.buttonRef.getBoundingClientRect()
   }
 
   componentDidUpdate() {
@@ -144,8 +144,7 @@ class Dropdown extends React.Component {
 
     let buttonHeight = this.buttonRef.offsetHeight
     let tipHeight = 8
-    let buttonOffset = offset(this.buttonRef)
-    let listTop = buttonOffset.top + buttonHeight + tipHeight
+    let listTop = this.buttonRect.top + buttonHeight + tipHeight
     let listHeight = this.listRef.offsetHeight
 
     if (listTop + listHeight > window.innerHeight) {
@@ -156,7 +155,7 @@ class Dropdown extends React.Component {
     }
 
     this.listRef.style.top = `${listTop}px`
-    this.listRef.style.left = `${buttonOffset.left}px`
+    this.listRef.style.left = `${this.buttonRect.left}px`
   }
 
   handlePageClick() {

+ 0 - 26
yarn.lock

@@ -2520,14 +2520,6 @@ doctrine@^2.0.0:
     esutils "^2.0.2"
     isarray "^1.0.0"
 
-document-offset@^1.0.4:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/document-offset/-/document-offset-1.0.4.tgz#7345b819cdfef2bb45c63ce13056416063b70085"
-  dependencies:
-    dom-support "*"
-    get-document "1.0.0"
-    within-element "0.1.0"
-
 dom-converter@~0.1:
   version "0.1.4"
   resolved "https://registry.yarnpkg.com/dom-converter/-/dom-converter-0.1.4.tgz#a45ef5727b890c9bffe6d7c876e7b19cb0e17f3b"
@@ -2545,12 +2537,6 @@ dom-serializer@0, dom-serializer@~0.1.0:
     domelementtype "~1.1.1"
     entities "~1.1.1"
 
-dom-support@*:
-  version "0.0.2"
-  resolved "https://registry.yarnpkg.com/dom-support/-/dom-support-0.0.2.tgz#0e129764ffa5e203d8ab5839e2e92dc2ae14ef7c"
-  dependencies:
-    domready "*"
-
 dom-walk@^0.1.0:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/dom-walk/-/dom-walk-0.1.1.tgz#672226dc74c8f799ad35307df936aba11acd6018"
@@ -2579,10 +2565,6 @@ domhandler@^2.3.0:
   dependencies:
     domelementtype "1"
 
-domready@*:
-  version "1.0.8"
-  resolved "https://registry.yarnpkg.com/domready/-/domready-1.0.8.tgz#91f252e597b65af77e745ae24dd0185d5e26d58c"
-
 domutils@1.1:
   version "1.1.6"
   resolved "https://registry.yarnpkg.com/domutils/-/domutils-1.1.6.tgz#bddc3de099b9a2efacc51c623f28f416ecc57485"
@@ -3423,10 +3405,6 @@ get-caller-file@^1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/get-caller-file/-/get-caller-file-1.0.2.tgz#f702e63127e7e231c160a80c1554acb70d5047e5"
 
-get-document@1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/get-document/-/get-document-1.0.0.tgz#4821bce66f1c24cb0331602be6cb6b12c4f01c4b"
-
 get-stream@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/get-stream/-/get-stream-3.0.0.tgz#8e943d1358dc37555054ecbe2edb05aa174ede14"
@@ -7499,10 +7477,6 @@ window-size@0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/window-size/-/window-size-0.1.0.tgz#5438cd2ea93b202efa3a19fe8887aee7c94f9c9d"
 
-within-element@0.1.0:
-  version "0.1.0"
-  resolved "https://registry.yarnpkg.com/within-element/-/within-element-0.1.0.tgz#b610be314fb588bf21d7bd733906e437f30e2b95"
-
 wordwrap@0.0.2:
   version "0.0.2"
   resolved "https://registry.yarnpkg.com/wordwrap/-/wordwrap-0.0.2.tgz#b79669bb42ecb409f83d583cad52ca17eaa1643f"