Terra-core: [terra-form-select] Allow for when clicking into select field, highlight the text for easier editing of the value

[kschuste]

Feature Request

Description

Today, when you click into the select box, the cursor goes to the right of the text and if you want to type in a new value to search with, you need to backspace out all of the characters.

Would be nice to have the option to highlight the text when focus is received. Then you would not need to backspace out each character and can directly input the text you want right away.

In our case, especially for measurements where we are wanting a value and a unit, we may just have a unit, if we want to input a different value and unit, we would need to clear the entire text. If it was highlighted, we could just start inputting our value right away.

Additional Context / Screenshots

[pranav300]

This could be a possible solution.

componentDidUpdate(previousProps, previousState) {
    if (FrameUtil.shouldPositionDropdown(previousState, this.state, this.dropdown)) {
      clearTimeout(this.debounceTimer);
      this.debounceTimer = setTimeout(this.positionDropdown, !previousState.isOpen ? 0 : 100);
    }
+   this.input.setSelectionRange(0, this.input.value.length);
  }

Mentions

@bjankord @StephenEsser

[ShettyAkarsh]

@pranav300 we should be highlighting the text even in this case as well.

1. Select the item in the dropdown.
2. Move focus out of the select box.
3. Now again click the select box. in this case also the entire text should be highlighted.

[StephenEsser]

We should reach out for UX involvement to help determine if this is an issue we want to pursue.

There are many workflows that are may be treated differently. Specifically differences between keyboard and mouse interactions. IE: Keyboard navigation does currently highlight the entire text string on focus, but mouse clicks do not.

Another edge case would be clicking the text in the input vs clicking the dropdown icon.

cc: @neilpfeiffer