[SelectField] currentTarget no longer works

[wlcdesigns]

Prior to 0.15.4 I was able to capture custom data from the selected menu items with event.currentTarget.dataset. Now event.currentTarget returns null onChange

Example:

<SelectField value={this.state.value} onChange={this.handleSelect}>
      <MenuItem value={1} data-customData="foo_bar" primaryText="Choose Something" />
      <MenuItem value={1} data-customData="bar_foo" primaryText="Choose Something Else etc." />
</SelectField>

[M1chaelTran]

+1

[ghost]

This is occurring again in v4.5.1.

The reason I default to using currentTarget instead of target is noted here.

The Material-ui docs say to use target for Select, but that does not match with the rest of the inputs and I think it is sending the wrong signal because I attach the onChange handler to the Select.

I'm not sure if anyone will see this comment, so I'll wait a few days before I make a new issue.

Thank you.

[oliviertassinari]

@wbstow In practice, you would like to see this diff land?

diff --git a/packages/material-ui/src/Select/SelectInput.js b/packages/material-ui/src/Select/SelectInput.js
index 9b42a632c..6b39ab47c 100644
--- a/packages/material-ui/src/Select/SelectInput.js
+++ b/packages/material-ui/src/Select/SelectInput.js
@@ -127,6 +127,7 @@ const SelectInput = React.forwardRef(function SelectInput(props, ref) {

       event.persist();
       event.target = { value: newValue, name };
+      event.currentTarget = event.target;
       onChange(event, child);
     }
   };

[ghost]

@oliviertassinari It's up to you - with event.currentTarget.value I am getting the number zero (0) no matter what is selected (not the index) and the currentTarget is the select element the selected LI element. With event.target.value I am getting the value of the selected item and target is an object: { value: "TheValue", name: undefined }.

Having access to both might be useful to some, but I think it might be confusing to differentiate accessing index via currentTarget and value via target so another option might be to add the index to the target object if you deem access to index to be important.

I am not sure if this wasn't a breaking change because I could swear that my Select was working before I updated to v4.5.1. If you want - I can roll back to find out.

Thank you.

[ghost]

If you're trying to keep the signalling of the currentTarget in line with what happens in the DOM, then currentTarget should really be the element that the event handler was attached to, but I don't know if anyone cares about such things.

I corrected my last comment: currentTarget in this situation is the selected LI element, not the Select element.

[ghost]

Sorry - one more correction: With currentTarget.value it's not even the index of the selected item. It's just a zero (0), no matter which item is selected.

[oliviertassinari]

I don't think that we change it, event.target should be preferred.

[ghost]

OK, I had standardized on using currentTarget because I always want to get the value of the thing I attached the onChange handler to. That does seem to be working with all the other @material-ui/core inputs.

Whatever you decide is fine with me, just pointing it out.

Thanks!!

[ghost]

To make my Selects work, I simply created a different version of my useInputValue hook, which uses currentTarget called useInputTargetValue - so it's no big deal for me to alternate between these as necessary:

export function useInputTargetValue(defaultValue = "") {
  const [value, setValue] = React.useState(defaultValue);
  /** @param {React.SyntheticEvent<HTMLInputElement>} e */
  function onChange(e) {
    setValue(e.target.value);
  }
  return [value, onChange, setValue];
}