Material-ui: [Slider] Missing name property?

[chrislambe]

• [x] This is not a v0.x issue.
• [x] This is a Labs issue.
• [x] I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

As with other grouped form controls (e.g. RadioGroup as in the example), a library like Formik should be able to manage the form control state.

Current Behavior

Formik throws an error stating that it could not update the form control value because there was no name provided:

Warning: Formik called `handleChange`, but you forgot to pass an `id` or `name` attribute to your input:

    <span class="MuiToggleButton-label-1289">2</span>

    Formik cannot determine which value to update. For more info see https://github.com/jaredpalmer/formik#handlechange-e-reactchangeeventany--void

Steps to Reproduce

Link: https://codesandbox.io/s/yv5706y30x

1. Create a ToggleButtonGroup or Slider with state managed via Formik
2. Attempt to select one of the options

[oliviertassinari]

@chrislambe I'm not sure about the ToggleButtonGroup component, but for the Slider, yes, I believe that people should have access to the name property.

[chrislambe]

@oliviertassinari Sorry, I probably shouldn't have guessed at what the problem is. I don't mean to lead anyone down the wrong path. I think the more important issue is that I would expect to ToggleButtonGroup and Slider to behave like all the rest of the input components in MUI and be compatible with something like Formik.

[valeedmalik]

@oliviertassinari Also trying to utilize this slider within a Formik form. Any ideas as to when this fix would release?

[oliviertassinari]

@valeedmalik There is no fix coming, it has to be handled userland.

[mflash123]

Think fix is required. Because its common behavior. If this fix not coming -> than any other components need remove e.target.name :)
Hope fix is coming soon

[oliviertassinari]

The change event isn't coming from a native form, you can't use the target's name. See https://github.com/stackworx/formik-material-ui/issues/121 for integration example with formik.

[Vinayak-SP]

@chrislambe As of now, you have to handle it manually with an intermediate handler for slider before you call the handler of formik.

 const handleSliderChange = (event, newValue) => {
    event.target.name = 'Range';
    event.target.value = newValue;
    setSliderValue(newValue);
    props.onChangeHandlerFromFormik(event);
  };

Then in slider:

<Slider
name="Range"
value={props.data.range}
onChange={handleSliderChange} />

[workteam123]

Hi I agree with @mflash123 - all other material-ui components have a name property. Not providing it bloats code for event handling (you need a specific handler for each slider). So why the wontfix label @oliviertassinari ? Please dont be offended I regard the work you have done as exceptional - thank you.

[oliviertassinari]

@workteam123 The event can come from a couple of different sources. It doesn't originate from a native <input> element. The way we could work around this is with a logic like we use for the Select component:

diff --git a/packages/material-ui/src/Slider/Slider.js b/packages/material-ui/src/Slider/Slider.js
index d230d26eca..829e513def 100644
--- a/packages/material-ui/src/Slider/Slider.js
+++ b/packages/material-ui/src/Slider/Slider.js
@@ -503,6 +503,8 @@ const Slider = React.forwardRef(function Slider(props, ref) {
     setFocusVisible(index);

     if (onChange) {
+      event.target.name = name;
+      event.target.value = newValue;
       onChange(event, newValue);
     }
     if (onChangeCommitted) {
@@ -583,6 +585,8 @@ const Slider = React.forwardRef(function Slider(props, ref) {
     setValueState(newValue);

     if (onChange) {
+      nativeEvent.target.name = name;
+      nativeEvent.target.value = newValue;
       onChange(nativeEvent, newValue);
     }
   });
@@ -629,6 +633,8 @@ const Slider = React.forwardRef(function Slider(props, ref) {
     setValueState(newValue);

     if (onChange) {
+      event.target.name = name;
+      event.target.value = newValue;
       onChange(event, newValue);
     }

@@ -664,6 +670,8 @@ const Slider = React.forwardRef(function Slider(props, ref) {
     setValueState(newValue);

     if (onChange) {
+      event.target.name = name;
+      event.target.value = newValue;
       onChange(event, newValue);
     }

I have updated the reproduction to demonstrate that the above solution can make the integration with:

• formik: https://codesandbox.io/s/create-react-app-with-typescript-forked-wk5rt?file=/src/pages/index.tsx:796-807.
• react-hook-form: https://codesandbox.io/s/react-hook-form-v6-controller-forked-dxbfy?file=/src/Mui.js.

easier.

Related issues:

• https://github.com/react-hook-form/react-hook-form/issues/2327
• https://github.com/react-hook-form/react-hook-form/issues/2315
• https://github.com/stackworx/formik-material-ui/issues/121

[suliskh]

Is there anyone working on this?

[oliviertassinari]

@suliskh Not I'm aware of, you are free to go.