material-components-web-react icon indicating copy to clipboard operation
material-components-web-react copied to clipboard

Published 20 hours ago • verified publisher icon material-components

Checkbox: allow props to be passed via props

Open moog16 opened this issue 7 years ago • 5 comments
trafficstars

Nov 13 in Discord user reports issues of being able to pass props to field. He created a codepen. JS on the right is the JSX markup. The HTML on the left is what was output by the rendering engine.

https://codepen.io/jbsmith969/pen/zMNVEL

What would be better is rendering the component through composition. Instead of doing:

<Checkbox ... />

we should instead do:

<Checkbox ... >
  <CheckboxInput ... />
</Checkbox>

moog16 avatar Nov 14 '18 04:11 moog16

Oh nice! I like that. Would you do same for the Switch component as well?

behivetech avatar Nov 18 '18 15:11 behivetech

Yes, especially for consistency that makes sense. I'll open one for that component

moog16 avatar Nov 19 '18 18:11 moog16

Need to keep in mind this bug when fixing this issue.

moog16 avatar Nov 21 '18 00:11 moog16

From what I'm reading on that bug, it would seem like the ref issue would be fixed with this wouldn't it? The whole point of it is to give the developer more control over the props passed to the input element, so I would think this should come from free with this implementation.

behivetech avatar Nov 21 '18 02:11 behivetech

This component actually needs a handle on the ref. So it actually won't be fixed for free. But #308 is something we should have available in some way shape or form to give the developer more control. We may need to proxy the ref to the developer. Currently in text field we have a solution:

https://github.com/material-components/material-components-web-react/blob/master/packages/text-field/Input.js#L109

moog16 avatar Nov 21 '18 02:11 moog16