Problem with the :checked attribute of radio buttons

[r0man]

Hi @aJchemist,

I have a problem with the :checked attribute on a mdl/radio component, when rendering radio buttons from an array of maps. The following code should render a list of radio buttons:

(def unit-data
  [{:id :eu
    :description "Europe"}
   {:id :uk
    :description "United Kingdom"}
   {:id :us
    :description "United States"}])

(rum/defc unit-form < rum/static [data]
  [:form
   (for [{:keys [id description]} data]
     (mdl/radio
      {:checked (= id :eu)
       :for (name id)
       :input {:id (name id) :name "units" :value (name id)}
       :label description
       :mdl [:ripple]}))])

(unit-form unit-data)

When running this I get a Uncaught TypeError: Cannot read property 'updateClasses_' of undefined(…) exception. And I noticed the following:

• The first radio button seems to be "upgraded" (it looks like a material design radio button).

• All other buttons seem not to be upgraded (they look like browser native radio buttons).

• When I don't use the :checked attribute of mdl/radio, it works.

Any ideas?

Roman

[r0man]

Oh, I just saw this issue. Is this already fixed and released, or another issue? https://github.com/google/material-design-lite/pull/4809

[r0man]

Ok, sorry for the noise. I think it is not released yet upstream. :)

[ajchemist]

Hi @r0man, I've just cut rum-mdl 0.2.1 depends on latest google mdl 1.3.0.

but cljsjs/material 1.3.0 jar hasn't been pushed yet. PR is pending right now.

[r0man]

@aJchemist Thanks for the update. Have you seen the next version of material design lite? It's called material web components and lives here: https://github.com/material-components/material-components-web I'm thinking about switching to that version, because it addresses some issues the current MDL has.

[ajchemist]

@r0man It seems to be a promising transition.

I've been working with only clojure/java these days so I'm far behind clojurescript/web news

Anyway, thanks for seeing it.