0

While opening the dropdown option list the scrollbar moves to the bottom. The last options are visible in the select option list.

Can anyone provide solutions for showing the list items scrollbar to the top most items?

import React from 'react'
import { Dropdown } from '@fluentui/react-northstar';

class someComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
        currentObject: "",
        inputItems: [
            'Robert Tolbert',
            'Wanda Howard',
            'Tim Deboer',
            'Amanda Brady',
            'Ashley McCarthy',
            'Cameron Evans',
            'Carlos Slattery',
            'Carole Poland',
            'Robin Counts',
            'Test 1',
            'Test 2',
            'Test 3',
            'Test 4',
            'Test 5'
          ]
    }
  }
  **Function Called when user selects the options**
  onChangeObjectHandler(event, data){
    const objectName = data.value.header;
    this.setState({ currentObject: objectName });
  }

  render() {
    return (
      <div>
        <Dropdown
            checkable
            onChange={this.onChangeObjectHandler}
            items={this.state.inputItems}
            value={{this.state.currentObject}}
            placeholder="Select your object
        />
      </div>
    );
  }
}
export default someComponent;
oberbaum
  • 2,451
  • 7
  • 36
  • 52

2 Answers2

0

I have resolve this issue by using given below props of Dropdown component

defaultHighlightedIndex={0}
highlightedIndex={selectedIndex}

Note: these props will only works if u are using single selection Dropdown.

for multiple select Dropdown, u can use

defaultActiveSelectedIndex={0}
activeSelectedIndex={selectedIndex}
Fahad
  • 37
  • 1
  • 10
0

If you are using FluentUI/northstar, you can use the 'highlightFirstItemOnOpen'-prop inside the Dropdown. This will highlight the first item inside your Dropdown.

It's so sad that northstars documentation is hold pretty short..