Terra-core: [terra-form-select] Invalid onBlur events triggered when selecting an option

[StephenEsser]

Bug Report

Description

The Select component is triggering inappropriate onBlur events when selecting options.

Switching the variant produces different onBlur results.

Default Variant:

A default variant will fire onBlur every time an option is selected. (Mobile and Desktop)

Multiple/Search/Tag/Combobox:

The onBlur fires when the first option is selected and the dropdown menu closes. (Mobile)

Example Code:

import React, { useState } from 'react';
import Select from 'terra-form-select';

const Example = () => {
  const [value, setValue] = useState(['blue']);
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>{`Blur Count: ${count}`}</p>
      <Select variant="multiple" onBlur={() => { setCount(count + 1); }} value={value} onChange={setValue}>
        <Select.Option value="blue" display="Blue" />
        <Select.Option value="green" display="Green" />
        <Select.Option value="purple" display="Purple" />
        <Select.Option value="red" display="Red" />
        <Select.Option value="violet" display="Violet" />
      </Select>
    </div>
  );
};

export default Example;

Steps to Reproduce

1. Create a demo page using the code snippet above.
2. Click on the arrow button of the Select to open the dropdown.
3. Select an option.
4. Observe the onBlur event count.
5. Repeat steps 2-4 with each variant and observe they behave differently.

Note: The behavior is different when the dropdown is opened via clicking the arrow button vs clicking into the text/selection region.

Note: The behavior is different on desktop and mobile. Each variant should be testing on both desktop and mobile.

Additional Notes

The mobile workflows were tested on mobile iOS Safari using an iPhone X.

Expected Behavior

The onBlur event should only fire when focus navigates away from the Select. For the tag/multiple variants the dropdown menu should not close when selecting the first option.

[pranav300]

@StephenEsser

I tried the steps mentioned by you in the issue description. I, however, do not see blur events triggering multiple times upon an option selection across all variants. Could you let me know which version of form-select, you are seeing the issue in?

Note: I tested the snippet on iOS mobile Safari on an iPhone XS Max.

[StephenEsser]

@pranav300

The blur event is only being fired once for specific actions, but it should not be firing at all.

For default variants onBlur will fire once each time an option is selected. (Mobile and Desktop).

For multiple/search/tag/combobox variants (on mobile) the onBlur fires when the first option is selected and the dropdown menu closes. The dropdown menu should stay open for multiple/tag variants and the blur event should not fire.

Note: The dropdown menu must be opened by clicking the arrow button to observe the closing bug when an option is selected. This might be part of the issue with the blur events. Clicking into the field to open the dropdown behaves differently than clicking the arrow button to open the drop down.

Are you not seeing the onBlur event being fired at all in your testing?

[nramamurth]

@StephenEsser, thanks. We weren’t aware that you meant the arrow button in Step 2 🤷🏻‍♂️

[StephenEsser]

@nramamurth I've updated the reproduction steps to include directions for clicking the arrow button. I wasn't aware clicking the arrow button behaved differently until I double checked after @pranav300's comment. Both workflows should be checked while working on this issue for both mobile and desktop.

[prmeznar]

We are seeing some undesirable behavior in prod that seems tied directly to use of the drop down arrow and we definitely listen to the onBlur event, so I'm guessing this is related. Is there any ETA on this work or a way I could get notified when there is a snapshot to test against?

[StephenEsser]

@pranav300 @saket2403 (Issue assignees). This issue came up during office hours, are there any updates? Are both or either of you working on this issue?