zendeskgarden/react-components

Dropdown does not hide until onSelect has finished executing (UI block)

Closed this issue · 1 comments

ryry-ll commented

Hi team,

Not sure if it's deliberate or it's a bug in Dropdown component. Please see details below:

Expectation

Hide the dropdown immediately when an item is selected

Reality

The dropdown does not hide until the callback has done execution

Steps to Reproduce

Set onSelect callback on the dropdown

<Dropdown onSelect={onMenuSelect} ...>

with:

const onMenuSelect = (value)=>{
        const startTime = new Date().getTime();
        const delay = 5000; // 5 seconds
        while (new Date().getTime() - startTime < delay) {
            // Run an empty loop to introduce a delay
        }
        return true;
};

Outcome: when an item is selected, the menu does not close until 5 seconds later.

Info

  • Component: @zendeskgarden/react-dropdowns
  • Version: all
  • Browsers: all

Many thanks

jzempel commented

Hi @ryan-lovestockleaf. Along with some pretty egregious a11y violations, this behavior should be corrected with Garden's new Combobox. Please see the following references for details: