Webiny-js: Cannot disable form inputs

[doitadrian]

This is:

• Bug

Detailed Description

Passing a disabled={true} prop on components like Input and Select does not have any effect. For example:

https://storybook.webiny.com/?path=/story/components-input--usage
https://storybook.webiny.com/?path=/story/components-select--usage

It works in the RMWC library - https://rmwc.io/text-fields.

Not sure where the bug is but if I hardcoded the disabled={true} in packages/ui/src/Input/Input.tsx:112, all inputs would become disabled as expected:

So, it seems that the flag is not correctly passed to the actual RMWC TextArea component.

[ahmad-reza619]

hey @doitadrian i've seen the Input component, is it possible for missing prop types cause this? i think the implementation is already good

[Pavel910]

@ahmad-reza619 what do you mean by missing prop types?

[ahmad-reza619]

@Pavel910 the Input component has no disabled prop types, but it use disabled prop, so I think it automatically remove props that doesn't specified in prop type. It's just my guess actually, I never used typescript before

[Pavel910]

Actually that’s not correct, as you can see we compose types by importing the original Rmwc type and add our own props on top of that.

Also, TS doesn’t remove anything, no tools do. You can’t remove a prop from component; whatever is passed to component will be in the props object at runtime.

This is an interesting bug, I’ll take a look at it as well.

[doitadrian]

I found the issue here. Actually, it's related to the Bind component and how it spreads props to the child component:

packages/form/src/Bind.ts:78:

Changing this to the following fixed the issue:

[ahmad-reza619]

Is it already fixed?

[Pavel910]

@ahmad-reza619 nope, feel free to submit a PR if you'd like to take on this :)

[ahmad-reza619]

Alright will do, but wow, i never thought another component is the cause of all this 🤔 how is it even possible? is Bind forward it props to the children?