[terra-form-select] Combobox Variant Renders Options Inconsistently

Bug Report

Description

Combo box variant displays an empty object selection when using the space-bar to display the space options. This spacing persists with hover styles when space is removed.

Reason I think it’s a bug:

1. This selection ‘space’ option doesn’t render the same height of the other select options.
2. It doesn’t show the add option (+ ) indication to show that it should be added to the list.
3. Steps 7-10 results in an empty option that receives hover styles. The initial open options does not have this spacing.

Steps to Reproduce

1. Navigate to https://engineering.cerner.com/terra-core/#/raw/tests/terra-form-select/form-select/uncontrolled-combobox

2. Hit tab to focus to the select input

3. Hit space to open select options

screenshot

1. Click middle of page to remove select focus

screenshot

1. Hit tab to move focus to the select input

2. Hit down arrow key to open select options. See the empty, select option that is select. Its because it thinks it’s a space.

screenshot

1. Hit backspace key to remove the space.

screenshot

1. Click middle of page to remove focus.

2. Hit tab to return focus to input.

3. Hit down arrow or space bar to see an empty option (or gap before options) that receives hover styles.

screenshot

Expected Behavior

No empty selection option when no option was selected.

Environment

• Component Name and Version: v5.15.0
• Browser Name and Version: Chrome

[StephenEsser]

What do you mean by “cleared state” here?

The cleared state is the state in which the select returns when the dropdown closes. The text inside the search input is either accepted or rejected when the dropdown closes or the select loses focus. Either way the “search” text must be cleared. The value of the component can be updated, but the search query returns to an empty string.

This existing line of code is allowing any combobox value to be accepted, regardless of length, but for tag variants we reject if the value was empty.

(variant !== Variants.TAG || searchValue.trim().length > 0)

It is roughly equivalent to the following.

if (variant === Variants.combobox) {
  return true;
} else if (variant === Variants.TAG && searchValue.length > 0) {
  return true;
}

We cannot reject blank strings inside of shouldAddOptionOnBlur for the combobox otherwise we end up with the behavior where empty strings revert the field back to a previously selected value.

The behavior the Combobox should have: (On Blur the Combobox returns and updates the value to an empty string)

The behavior that will happen if we reject blank strings in shouldAddOptionOnBlur:

( On Blur the Combobox reverts back to Green )

Empty strings must be allowed in shouldAddOptionOnBlur in order to clear the value, but we do not want to create blank strings within the options dropdown.

For your proposed solution the result seems to be roughly the same. However, shouldAddOptionOnBlur returns false but we add an option anyway, I think this is also confusing and duplicates some of the search changed logic that is already handled within shouldAddOptionOnBlur.

For me it makes sense that when a blank string is entered as input we should still add an option on blur, that option just happens to be an empty string. The shouldAddOptionOnBlur isn’t necessarily solely for input validation, it’s just a yes or no that when focus is lost we need to add an option.

I would choose whichever of the two options you think makes the most sense, as long as the behavior matches what we are expecting and does not add any additional state management into the component. I recommend also adding some comment documentation that explains the logic path for sending back an empty string.

[nramamurth]

@StephenEsser

Awesome! I am sorry about a lot of to and fro but I appreciate the detailed explanation. I shall go ahead and open a PR. Thank you.