Move required to TextField only

[BennyAlex]

Hello,

currently, the required prop got passed to the input itself. This is not neccessary, as stated in the MUI docs, required has only to be set on the TextField. Currently this causes a problem with forms, since setting the element to required triggers browser validation (saying this field is required) and the input field itself is empty even chips are shown. This should fix this error.

[viclafouch]

Hey ! There is no difference with the current version because the required prop is only applied to the TextField (restTextFieldProps which contains the required prop is already spread to the TextFieldcomponent).

See: https://github.com/viclafouch/mui-chips-input/blob/048445eb498e454c4ab67976dd4fc82fbdb78edd/src/components/TextFieldChip/TextFieldChips.tsx#L342

I mean, here, I don't see any changes.

[BennyAlex]

But its also spread to InputProps I think.

[viclafouch]

Nop, we only spread the InputProps prop to the InputProps of TextField.

[BennyAlex]

https://codesandbox.io/s/mui-chips-input-forked-kju5uw Ah okay, than we need another workaround? As you can see, the browser throws an error even chips have been set.

It works if setting clearInputOnBlur={false} and you type someting inside the field, buts this is of course not really a solution.

[viclafouch]

Nah, you have to remove the required prop, and create your own validation rule.

[viclafouch]

before submitting your form, you have to check if value.length > 0, if not, display your own error message

[BennyAlex]

@viclafouch Hey, thanks for answer. This of course remove the browser validation, but it also removes the MUI styling for required fields... So maybe the fix is to set required for inputProps (written in lowercase for the element props) to false, so there is no browser check going on?

[BennyAlex]

https://codesandbox.io/s/mui-chips-input-forked-kju5uw?file=/src/App.js

looks like this will work.

[BennyAlex]

@viclafouch I think if this should be included by default, since browser validation will always fail with chips input, so this is more or less a bug. The developer always has to do his own validation anyways and by just overwriting required in inputProps, he stil can make it in required style by setting required true on the chips input component itself.