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

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.

[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.

[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?