Added auto positioning in input select

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 }
 

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>
 
 

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}