Materialize: Can't check RadioButtons or Checkbox inside input-fields div

[alexisdiel]

Actually it's impossible to use checkboxes and radio-buttons inside the input-field div.

I created the following CodePen to show the problem and solution.
https://codepen.io/alexisdiel/pen/gxwPWj

They simply don't works

PR: https://github.com/Dogfalo/materialize/pull/5061

[alexisdiel]

Also reported at https://github.com/InfomediaLtd/angular2-materialize/issues/342

[eric-hobbs-gmail-com]

Thanks. I had just come across this myself. Your fix has worked for me

[smichaelsen]

This seems to occur starting with version 0.100.0. Downgrading to 0.99.0 fixed it for me.

[Dogfalo]

Fixed in v1-dev, the temporary fix for this is to not put checkboxes and radio buttons inside input-field

[silverdr]

I have a production code where checkboxes are still working as expected, also inside input-field div. I just encountered the problem in the development environment. Therefore I presume it was introduced relatively recently? I really would not like to introduce the temporary workaround to the whole codebase but on the other hand, I don't want the problem to propagate to the production environment with the update I need to make. Could you shed some light on where/when the problem was introduced and what to do/avoid in order to keep the production code working?

[Dogfalo]

The best solution is to not wrap the checkboxes in the .input-field class.

Another solution is to add

.input-field label {
  pointer-events: auto;
}

[silverdr]

But you say it's been fixed recently - so I assume this manual addition won't be needed some time "soon", right? BTW - I went through the recent releases using @alexisdiel's codepen and the problem seems to have been introduced in v0.100.0. I might freeze the Gemfile version to 0.99.0 until the next release is out. Is that something you'd agree to call a temporary solution? Without the input-field wrapper, the current layout breaks badly. It would be a surely non-trivial effort to rewrite views in the whole (rather sizable) application to remove all the wrappers and keep the layout intact.

[tdotholla]

Not necessarily a 'closed' solution if the solution is to take them outside of input-fields.
meteor-autoform places the 'input-field' class on the 'afFormGroup' template automatically.

i guess i have to use custom templates now.

[Dogfalo]

It's a 'closed' solution because it has been fixed for the next release

[silverdr]

@tdotholla - unless you need something out of the later versions, you might use 0.99.x until the next release is out. I didn't receive any response to my humble question above but it seems to work for me so far.

[tdotholla]

Ah thanks @silverdr,
Implementing @Dogfalo solution is working out perfectly for me for now.

.input-field label {
pointer-events: auto;
}

[MarvelMoe]

Has anyone addressed the elephant in the room....why did the materialize team set the pointer-events property to 'none' on [type="checkbox"]:checked and [type="checkbox"]:not(:checked)?

[Dogfalo]

@MarvelMoe The change was targeted for input text fields, but we didn't anticipate that many people had put checkboxes inside .input-field as well

[silverdr]

@Dogfalo - I believe it is because putting form inputs other than text in there seems natural when text ones are already there. Besides not really knowing that some type of input elements need to be treated differently than other (e. g. text vs. checkbox) and besides layouts behaving quite differently (than expected) when checkboxes are not placed inside .input-field.

[tdotholla]

Also aldeed: autoforms had them formatted as previously described, so the
change broke apps using autoforms.
On Mon, Dec 18, 2017 at 8:36 AM silverdr [e-mail] wrote:

@Dogfalo https://github.com/dogfalo - I believe it is because putting
form inputs other than text in there seems natural when text ones are
already there. Besides not really knowing that some type of input elements
need to be treated differently than other (e. g. text vs. checkbox) and
besides layouts behaving quite differently (than expected) when checkboxes
are not placed inside .input-field.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/Dogfalo/materialize/issues/5062#issuecomment-352426942,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AA6ThTpBC12JJiyl1VeSbclp-dC111F9ks5tBmo_gaJpZM4Orn21
.

[SGTMcClain]

I guess my issue is that in the example on http://materializecss.com/forms.html it doesn't mention that anything else is needed to make checkboxes function properly.

[ghost]

having same issue of the checkbox not able to uncheck when clicked. my html is
<input type="checkbox" name="remember" class="filled-in" checked="checked" value="1" />
clearly im using this for logins with the laravel php framework so right now the system is remembering my users.

[silverdr]

Has this eventually been fixed and a fix released? Or is it still "fixed in next release"?