Repository: grommet/grommet (JavaScript)

Issue:
Select onChange target is null when using a jsx element as initial value
### Expected Behavior
Select a new value and `onChange` `event.target`  shouldn't be undefined
### Actual Behavior
`event.target` is undefined
### URL, screen shot, or Codepen exhibiting the issue
https://codesandbox.io/s/wonderful-spence-r3ew0
### Steps to Reproduce
Sandbox: change the value and see value logged for target.
Or running this test:
failing test
```
  test("onChange target isn't undefined", () => {
    const onChange = jest.fn();
    const { getByText } = render(
      <Select
        id="test-select"
        value={<span>one</span>}
        options={[<span>one</span>, <span>two</span>]}
        onChange={onChange}
      />,
    );
    fireEvent.click(getByText('one'));
    fireEvent.click(
      document
        .getElementById('test-select__drop')
        .querySelectorAll('button')[1],
    );
    expect(onChange).toBeCalledWith(
      expect.objectContaining({ value: <span>two</span> }),
    );
    expect(onChange).toBeCalledWith(
      expect.not.objectContaining({ target: undefined }),
    );
  });
```
### Your Environment
- Grommet version: master branch
- Browser Name and version: Chrome 86
- Operating System and version (desktop or mobile): Windows 10
___

I noticed this while working on #3173. The solution for that issue should also fix this one but wanted to check if anyone has any thoughts about it.


Discussion:
Actually, I just noticed this in the docs
```
Passing an element is deprecated. Instead, use the 'valueLabel' property.
```
So, I replicated the issue using `valueLabel` https://codesandbox.io/s/hardcore-violet-gg973

These lines seem to be the cause: https://github.com/grommet/grommet/blob/dbb7a66730f6c144b083f25bff05a38a2dee9fb5/src/js/components/Select/Select.js#L172-L174 https://github.com/grommet/grommet/blob/dbb7a66730f6c144b083f25bff05a38a2dee9fb5/src/js/components/Select/Select.js#L248-L249



Patch:
diff --git a/src/js/components/Select/Select.js b/src/js/components/Select/Select.js
index 5d6ab98f2ed..7a425618c48 100644
--- a/src/js/components/Select/Select.js
+++ b/src/js/components/Select/Select.js
@@ -26,6 +26,10 @@ const SelectTextInput = styled(TextInput)`
   cursor: ${props => (props.defaultCursor ? 'default' : 'pointer')};
 `;
 
+const HiddenInput = styled.input`
+  display: none;
+`;
+
 const StyledSelectDropButton = styled(DropButton)`
   ${props => !props.callerPlain && controlBorderStyle};
   ${props =>
@@ -306,7 +310,18 @@ const Select = forwardRef(
             background={theme.select.background}
           >
             <Box direction="row" flex basis="auto">
-              {selectValue || (
+              {selectValue ? (
+                <>
+                  {selectValue}
+                  <HiddenInput
+                    type="text"
+                    id={id ? `${id}__input` : undefined}
+                    value={inputValue}
+                    ref={inputRef}
+                    readOnly
+                  />
+                </>
+              ) : (
                 <SelectTextInput
                   a11yTitle={
                     a11yTitle &&


Test patch:
diff --git a/src/js/components/Form/__tests__/__snapshots__/Form-test-uncontrolled.js.snap b/src/js/components/Form/__tests__/__snapshots__/Form-test-uncontrolled.js.snap
index dbc3692df0c..f3520aa25a9 100644
--- a/src/js/components/Form/__tests__/__snapshots__/Form-test-uncontrolled.js.snap
+++ b/src/js/components/Form/__tests__/__snapshots__/Form-test-uncontrolled.js.snap
@@ -2922,7 +2922,7 @@ exports[`Form uncontrolled reset clears select, checkbox, radiobuttongroup 2`] =
       >
         <button
           aria-label="Open Drop"
-          class="StyledButton-sc-323bzc-0 gYrxne Select__StyledSelectDropButton-sc-17idtfo-1 dYfCep"
+          class="StyledButton-sc-323bzc-0 gYrxne Select__StyledSelectDropButton-sc-17idtfo-2 lbRXvO"
           id="test-select"
           type="button"
         >
diff --git a/src/js/components/Select/__tests__/Select-test.js b/src/js/components/Select/__tests__/Select-test.js
index 17e375a437d..970f06ede9f 100644
--- a/src/js/components/Select/__tests__/Select-test.js
+++ b/src/js/components/Select/__tests__/Select-test.js
@@ -978,6 +978,9 @@ describe('Select', () => {
       expect.objectContaining({
         value: 'one',
         option: 'one',
+        target: expect.objectContaining({
+          value: 'one',
+        }),
       }),
     );
   });
diff --git a/src/js/components/Select/__tests__/__snapshots__/Select-test.js.snap b/src/js/components/Select/__tests__/__snapshots__/Select-test.js.snap
index 816bb291d85..a478f73e261 100644
--- a/src/js/components/Select/__tests__/__snapshots__/Select-test.js.snap
+++ b/src/js/components/Select/__tests__/__snapshots__/Select-test.js.snap
@@ -2741,7 +2741,7 @@ exports[`Select complex options and children 1`] = `
 exports[`Select complex options and children 2`] = `
 <button
   aria-label="Open Drop"
-  class="StyledButton-sc-323bzc-0 dsmCNz Select__StyledSelectDropButton-sc-17idtfo-1 iGEQF"
+  class="StyledButton-sc-323bzc-0 dsmCNz Select__StyledSelectDropButton-sc-17idtfo-2 cIefVi"
   id="test-select"
   type="button"
 >
@@ -4554,7 +4554,7 @@ exports[`Select disabled 1`] = `
 exports[`Select disabled 2`] = `
 <button
   aria-label="Open Drop"
-  class="StyledButton-sc-323bzc-0 eyQMsp Select__StyledSelectDropButton-sc-17idtfo-1 iGEQF"
+  class="StyledButton-sc-323bzc-0 eyQMsp Select__StyledSelectDropButton-sc-17idtfo-2 cIefVi"
   disabled=""
   id="test-select"
   type="button"
@@ -7307,7 +7307,7 @@ exports[`Select onChange with valueKey string 3`] = `
 `;
 
 exports[`Select onChange with valueLabel 1`] = `
-.c6 {
+.c7 {
   display: inline-block;
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
@@ -7318,25 +7318,25 @@ exports[`Select onChange with valueLabel 1`] = `
   stroke: #7D4CDB;
 }
 
-.c6 g {
+.c7 g {
   fill: inherit;
   stroke: inherit;
 }
 
-.c6 *:not([stroke])[fill="none"] {
+.c7 *:not([stroke])[fill="none"] {
   stroke-width: 0;
 }
 
-.c6 *[stroke*="#"],
-.c6 *[STROKE*="#"] {
+.c7 *[stroke*="#"],
+.c7 *[STROKE*="#"] {
   stroke: inherit;
   fill: none;
 }
 
-.c6 *[fill-rule],
-.c6 *[FILL-RULE],
-.c6 *[fill*="#"],
-.c6 *[FILL*="#"] {
+.c7 *[fill-rule],
+.c7 *[FILL-RULE],
+.c7 *[fill*="#"],
+.c7 *[FILL*="#"] {
   fill: inherit;
   stroke: none;
 }
@@ -7382,7 +7382,7 @@ exports[`Select onChange with valueLabel 1`] = `
   flex-basis: auto;
 }
 
-.c5 {
+.c6 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -7469,13 +7469,17 @@ exports[`Select onChange with valueLabel 1`] = `
   -webkit-font-smoothing: antialiased;
 }
 
+.c5 {
+  display: none;
+}
+
 .c2 {
   border: 1px solid rgba(0,0,0,0.33);
   border-radius: 4px;
 }
 
 @media only screen and (max-width:768px) {
-  .c5 {
+  .c6 {
     margin-left: 6px;
     margin-right: 6px;
   }
@@ -7499,14 +7503,21 @@ exports[`Select onChange with valueLabel 1`] = `
         <span>
           none
         </span>
+        <input
+          class="c5"
+          id="test-select__input"
+          readonly=""
+          type="text"
+          value=""
+        />
       </div>
       <div
-        class="c5"
+        class="c6"
         style="min-width: auto;"
       >
         <svg
           aria-label="FormDown"
-          class="c6"
+          class="c7"
           viewBox="0 0 24 24"
         >
           <polyline
@@ -9180,7 +9191,7 @@ exports[`Select prop: onOpen 1`] = `
 exports[`Select prop: onOpen 2`] = `
 <button
   aria-label="Open Drop"
-  class="StyledButton-sc-323bzc-0 dsmCNz Select__StyledSelectDropButton-sc-17idtfo-1 iGEQF"
+  class="StyledButton-sc-323bzc-0 dsmCNz Select__StyledSelectDropButton-sc-17idtfo-2 cIefVi"
   id="test-select"
   type="button"
 >
@@ -10106,7 +10117,7 @@ exports[`Select renders custom up and down icons 2`] = `
 >
   <button
     aria-label="Open Drop"
-    class="StyledButton-sc-323bzc-0 dsmCNz Select__StyledSelectDropButton-sc-17idtfo-1 iGEQF"
+    class="StyledButton-sc-323bzc-0 dsmCNz Select__StyledSelectDropButton-sc-17idtfo-2 cIefVi"
     type="button"
   >
     <div
@@ -13391,7 +13402,7 @@ exports[`Select select an option 1`] = `
 `;
 
 exports[`Select select an option with complex options 1`] = `
-.c4 {
+.c5 {
   display: inline-block;
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
@@ -13402,25 +13413,25 @@ exports[`Select select an option with complex options 1`] = `
   stroke: #7D4CDB;
 }
 
-.c4 g {
+.c5 g {
   fill: inherit;
   stroke: inherit;
 }
 
-.c4 *:not([stroke])[fill="none"] {
+.c5 *:not([stroke])[fill="none"] {
   stroke-width: 0;
 }
 
-.c4 *[stroke*="#"],
-.c4 *[STROKE*="#"] {
+.c5 *[stroke*="#"],
+.c5 *[STROKE*="#"] {
   stroke: inherit;
   fill: none;
 }
 
-.c4 *[fill-rule],
-.c4 *[FILL-RULE],
-.c4 *[fill*="#"],
-.c4 *[FILL*="#"] {
+.c5 *[fill-rule],
+.c5 *[FILL-RULE],
+.c5 *[fill*="#"],
+.c5 *[FILL*="#"] {
   fill: inherit;
   stroke: none;
 }
@@ -13466,7 +13477,7 @@ exports[`Select select an option with complex options 1`] = `
   flex-basis: auto;
 }
 
-.c3 {
+.c4 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -13543,8 +13554,12 @@ exports[`Select select an option with complex options 1`] = `
   border: 0;
 }
 
+.c3 {
+  display: none;
+}
+
 @media only screen and (max-width:768px) {
-  .c3 {
+  .c4 {
     margin-left: 6px;
     margin-right: 6px;
   }
@@ -13565,14 +13580,21 @@ exports[`Select select an option with complex options 1`] = `
       <span>
         one
       </span>
+      <input
+        class="c3"
+        id="test-select__input"
+        readonly=""
+        type="text"
+        value=""
+      />
     </div>
     <div
-      class="c3"
+      class="c4"
       style="min-width: auto;"
     >
       <svg
         aria-label="FormDown"
-        class="c4"
+        class="c5"
         viewBox="0 0 24 24"
       >
         <polyline
@@ -14671,7 +14693,7 @@ exports[`Select select option by typing should not break if caller passes JSX 2`
 >
   <button
     aria-label="Open Drop"
-    class="StyledButton-sc-323bzc-0 dsmCNz Select__StyledSelectDropButton-sc-17idtfo-1 iGEQF"
+    class="StyledButton-sc-323bzc-0 dsmCNz Select__StyledSelectDropButton-sc-17idtfo-2 cIefVi"
     id="test-select"
     type="button"
   >
diff --git a/src/js/components/Select/__tests__/__snapshots__/SelectMultiple-test.js.snap b/src/js/components/Select/__tests__/__snapshots__/SelectMultiple-test.js.snap
index 9004eb10bde..2e0182edb40 100644
--- a/src/js/components/Select/__tests__/__snapshots__/SelectMultiple-test.js.snap
+++ b/src/js/components/Select/__tests__/__snapshots__/SelectMultiple-test.js.snap
@@ -3100,7 +3100,7 @@ exports[`Select Controlled multiple values 1`] = `
 exports[`Select Controlled multiple values 2`] = `
 <button
   aria-label="Open Drop"
-  class="StyledButton-sc-323bzc-0 dsmCNz Select__StyledSelectDropButton-sc-17idtfo-1 iGEQF"
+  class="StyledButton-sc-323bzc-0 dsmCNz Select__StyledSelectDropButton-sc-17idtfo-2 cIefVi"
   id="test-select"
   type="button"
 >