Skip to content
This repository was archived by the owner on Jun 1, 2020. It is now read-only.
This repository was archived by the owner on Jun 1, 2020. It is now read-only.

RangeWidget / Material-UI Slider throws continuous Exception if no default value given #128

@lgersman

Description

@lgersman

Hi guys,
you did a great job !

I have just one tiny issue - when using the range widget ("ui:widget": "range") and the schema defines no default value the Material-UI Slider throws continuous Exceptions :

Material-UI: A component is changing an uncontrolled Slider to be controlled.
Elements should not switch from uncontrolled to controlled (or vice versa).
Decide between using a controlled or uncontrolled Slider element for the lifetime of the component.
More info: https://fb.me/react-controlled-components
    in Slider (created by WithStyles)
    in WithStyles (created by RangeWidget)
    in RangeWidget (created by Anonymous)
...

since the control cannot bind to state.value

This can easily be fixed by providing 0 as default value to the value Parameter in

like this :

const RangeWidget = ({
  value = 0,
  readonly,
  disabled,
...

Hope this helps you guys a bit.

One more suggestion : It would be nice to add some additional classes to the FormLabel of the RangeWidget to make styling easier. For me the most confortable tweak right now is to use

<FormLabel
    id={id}
    className="MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiFormLabel-filled"
        >
   {label}
</FormLabel>

which lets it look like the text input label.

But it would make more sense not to apply the InputLabel classes for but slider namespaced css classes. Its just a suggestion..

Happy coding,

Lars

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions