0

Is there a way to know when a multiselect dropdown is collapsed? I have a multiselect dropdown as show here:

Multi Select Dropdown On unselecting all options, the dropdown still remains expanded as shown in the above image. On clicking somewhere else in the screen outside dropdown, it collapses. I need to perform some actions (for example, display a message) when dropdown collapses. Is there a way to know when a multiselect dropdown is collapsed?

I was able to use onBlur instead. But, I need to click outside Dropdown twice in order to print the message.

<Dropdown
options={[
{ key: 'A', text: 'Option a' },
{ key: 'B', text: 'Option b' },
{ key: 'C', text: 'Option c' }
]}
multiSelect={true}
onBlur={this.onFilterDropDownDismiss}
/>

private onFilterDropDownDismiss = (): void => {
console.log("Dismissed");
}

But, I need to display the message on one click outside. Please let me know if there are any suggestions to fix this.

user989988
  • 3,006
  • 7
  • 44
  • 91

1 Answers1

0

IDropdownProps.onDismiss event could be utilized for that matter:

Callback issues when the options callout is dismissed

<Dropdown
      options={[
        { key: 'A', text: 'Option a' },
        { key: 'B', text: 'Option b' },
        { key: 'C', text: 'Option c' }
      ]}
      multiSelect={true}
      onDismiss={this.onFilterDropDownDismiss}
    />


private onFilterDropDownDismiss = (): void => {    
   console.log("Dismissed");
}

Here is a demo for your reference

Vadim Gremyachev
  • 57,952
  • 20
  • 129
  • 193