diff --git a/components/dropdown/src/dropdown.tsx b/components/dropdown/src/dropdown.tsx
index f073533c4..f9490f44c 100644
--- a/components/dropdown/src/dropdown.tsx
+++ b/components/dropdown/src/dropdown.tsx
@@ -262,20 +262,15 @@ export default class Dropdown extends Component<
     const { height, width } = this.state
     const { auto } = this.props
 
-    const maxWidth = reference.width
-    const maxHeight = reference.height
-
-    // Choose:
-    const up = auto
-      ? target.bottom + height > maxHeight && target.top - height >= 0
-      : this.props.up
-    const left = auto ? target.left + width < maxWidth : this.props.left
-    const right = auto
-      ? left
-        ? false
-        : target.right - width > 0
-      : this.props.right
-    const down = auto ? !up : this.down
+    const scrollableHeight =
+      document.body.scrollHeight - (window.scrollY + window.innerHeight)
+    const spaceBelow = window.innerHeight - target.bottom
+    const spaceRight = window.innerWidth - target.left
+
+    const down = auto ? spaceBelow + scrollableHeight > height : this.down
+    const up = auto ? !down : this.props.up
+    const left = auto ? target.left > 0 : this.props.left
+    const right = auto ? spaceRight > 0 : this.props.right
 
     const layout = { up, left, right, down }
 
diff --git a/components/input-select/docs/Overview.mdx b/components/input-select/docs/Overview.mdx
index d2949227f..276d66990 100644
--- a/components/input-select/docs/Overview.mdx
+++ b/components/input-select/docs/Overview.mdx
@@ -108,7 +108,11 @@ return (
 </>
 )
 ```
-
+Below is an Input Select with auto set as true, which automatically positions the dropdown above the selection
+ <InputSelect
+    auto
+    options={[1,2,3,4,5]}
+  />
 </Documenter>
 
 
diff --git a/components/input-select/src/input-select.tsx b/components/input-select/src/input-select.tsx
index c93179895..d83685eaa 100644
--- a/components/input-select/src/input-select.tsx
+++ b/components/input-select/src/input-select.tsx
@@ -105,6 +105,11 @@ export interface Props<Value = any, Option = any> extends BaseProps {
    */
   up?: boolean
 
+  /**
+   * Whether to auto compute the position of dropdown options around the input selection.
+   */
+  auto?: boolean
+
   /*** Field Context Passed from parent Field */
   __fieldContext?: FieldContext
   /*** Visually Representing error state of component */
@@ -157,6 +162,7 @@ export default class InputSelect<Value = any, Option = any> extends Component<
       return <div className={classnames('empty')}>No results found</div>
     },
     up: false,
+    auto: false,
   }
 
   constructor(props) {
@@ -213,6 +219,7 @@ export default class InputSelect<Value = any, Option = any> extends Component<
       disabled,
       readOnly,
       up,
+      auto,
       __fieldContext = {},
       error,
       variant = 'bordered',
@@ -227,6 +234,7 @@ export default class InputSelect<Value = any, Option = any> extends Component<
         right
         up={up}
         container
+        auto={auto}
         className={classnames('container', { disabled })}
         isOpen={this.state.isOpen}
         onOpen={disabled ? null : this.handleOpen}