none
Multi-select dropdown using Office UI cannot select multiple options RRS feed

  • Question

  • Hi all,

    I am facing issue with multi-select dropdown in Office fabric UI while using it with react.

    I have tried same as given.

    After selecting option, it doesn't displaying as selected or highlighted. I have tried the same without using react hooks as below:

    import React, { Component } from 'react';
    import { Dropdown, IDropdownOption, ResponsiveMode } from 'office-ui-fabric-react/lib/Dropdown';
    import { KeyboardSpinDirection } from 'office-ui-fabric-react';
    declare let parent: any;
    interface IProps {
        options: any;
    }
    interface IState {
        keys: string[];
    }
    export class Drop extends React.Component<IProps, IState>{
        constructor(props: IProps) {
           
            super(props);
            this.state = {
                keys: []
            };
            this.onchanged = this.onchanged.bind(this);
        }
        onchanged(item: any) {
            if (item) {
                this.state.keys.push(item);
            }
        }
        public render(): JSX.Element {
            return (
                <div>
                    <Dropdown
                        multiSelect={true}
                        options={this.props.options}
                        dropdownWidth={208}
                        responsiveMode={ResponsiveMode.unknown}
                        placeholder={"Select cat..."}
                        title={"Category"}
                        id="category"
                        selectedKeys={this.state.keys}
                        onChanged={this.onchanged}
                    />
                </div>
            )
        }
    }

    Is there any way to implement the same?

    Tuesday, November 17, 2020 7:01 AM