React Semantic UI Dropdown open on bottom

Question

<Dropdown
      text={employeeOptions.find((e) => e.key === selectedEmployee)?.text as string || t('roomDetails.selectEmployee')}
      value={selectedEmployee}
      selectOnBlur={false}
      scrolling
      fluid
      options={employeeOptions}
      onChange={onEmployeeChange}
      disabled={disabled}
      className={styles.employeeDropdown}
    />

My task is to make this dropdown only open to bottom (even if there is no space).

Currently on the bottom its open like this:

[Option1]
[Option2]
[Option3]
[Dropdown]

But i want to open it on the bottom like this:

[Dropdown]
[Option1]
[Option2]
[Option3]

Answer 1

Set upward={false} to prevent it to open upwards. See official documentation here

import React from 'react'
import { Dropdown } from 'semantic-ui-react'

const options = [
  { key: 1, text: 'One', value: 1 },
  { key: 2, text: 'Two', value: 2 },
  { key: 3, text: 'Three', value: 3 },
]

const DropdownExampleUpwardSelection = () => (
  <Dropdown
    upward={false}
    search
    selection
    options={options}
    placeholder='Choose an option'
  />
)

export default DropdownExampleUpwardSelection