Formik setFieldValue right-aligns Select option when selected

It seems that Formik.setFieldValue imperatively simulates typing in a value into the <input type="text" /> that’s rendered by the Select, which causes the text to be right-aligned.

Expected Behavior

Selected option inside the Select box should be left-aligned after selected

Actual Behavior

Selected option inside the Select box is right-aligned after selected

URL, screen shot, or Codepen exhibiting the issue

Code sandbox for repro: https://codesandbox.io/s/grommet-issue-4087-text-right-aligned-in-select-after-selecting-option-55oxz?file=/src/App.js

Steps to Reproduce

1. Create a custom handler that uses Formik.setFieldValue and pass it to the onChange prop of a Select component:

  const onChange = (event: GrommetSelectEvent<typeof options[number]>) => {
    const value = event.value?.id || form.initialValues[field.name];
    form.setFieldValue(field.name, value);
  };

Documentation on Formik.setFieldValue here: https://jaredpalmer.com/formik/docs/api/formik#setfieldvalue-field-string-value-any-shouldvalidate-boolean--void

1. Pass these options to the same Select component: ['option 1', 'option 2', 'option 3', 'extra super long name that needs to be truncated inside the select box']
2. In the UI, click the ‘extra super long name that needs to be truncated inside the select box’ option
3. Verify that the selected text inside the Select box is right-aligned (see GIF above)

Your Environment

• Grommet version: “grommet”: “^2.7.7”
• Browser Name and version: Chrome for Mac Version 81.0.4044.138 (Official Build) (64-bit)
• Operating System and version (desktop or mobile): macOS Catalina v10.15.4

Also reproducible in Edge, Safari, and Firefox.

[jcfilben]

It is still left-aligned for me even after selecting option 1 and then selecting the long-text option

[ShimiSun]

Can you please isolate the problem reliably on a newer version of grommet, and send us a codesandbox with the markup to explore the problem. it will have a quicker turnaround if we’ll know how you are using the component within Formik.