Merge pull request #405 from dcos-labs/mp/fix/typeahead-dropdownmenu-…

…no-width Fixes issues when using Typeahead inside a modal
d2iq · Sep 18, 2019 · d661dea · d661dea
2 parents f9c0922 + 38896ff
commit d661dea
Show file tree

Hide file tree

Showing 9 changed files with 2,063 additions and 845 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -47,14 +47,14 @@
     "downshift": "3.2.10",
     "emotion": "9.2.12",
     "emotion-theming": "9.2.9",
-    "focus-trap-react": "4.0.1",
     "immutable": "^4.0.0-rc.12",
     "memoize-one": "4.0.2",
     "react-chartist": "^0.13.3",
     "react-click-outside": "3.0.1",
     "react-delegate-component": "1.0.0",
     "react-draggable": "3.2.1",
     "react-emotion": "9.2.12",
+    "react-focus-lock": "2.0.5",
     "react-tabs": "^3.0.0",
     "react-toggled": "1.2.7",
     "react-transition-group": "2.5.0",

diff --git a/packages/dropdownable/components/Dropdownable.tsx b/packages/dropdownable/components/Dropdownable.tsx
@@ -181,8 +181,9 @@ class Dropdownable extends React.Component<DropdownableProps, State> {
         windowDimensions.height
     };
     const possibleHorizDirections = {
-      left: dropdownDimensions.width >= childBounds.right,
-      right: dropdownDimensions.width <= childBounds.right,
+      left:
+        dropdownDimensions.width + childBounds.left <= windowDimensions.width,
+      right: childBounds.right - dropdownDimensions.width >= 0,
       center:
         triggerCenter - dropdownDimensions.width / 2 > 0 &&
         triggerCenter + dropdownDimensions.width / 2 < windowDimensions.width