Suggestion: Don't use :nobr in formative.render

[theJohnnyBrown]

The problem for me is using formative-generated hiccup vectors in sablono, but lack of support for the tag in Reactjs.DOM is the underlying issue. Also, the w3c discourages its use.

[theJohnnyBrown]

In my case, the error looked like throw cljs.core.ex_info.call(null, [cljs.core.str("Unsupported HTML tag: ").

I'm currently working around the issue by overriding the :checkbox dispatch value of the render-field multimethod in the namespace where I call render-form, like so,

(remove-method fr/render-field :checkboxes)
(defmethod fr/render-field :checkboxes [field]
  (let [vals (set (map str (:value field)))
        opts (fu/normalize-options (:options field))
        fname (str (name (:name field)) "[]")
        cols (:cols field 1)
        cb-per-col (+ (quot (count opts) cols)
                      (if (zero? (rem (count opts) cols))
                        0 1))
        build-cb (fn [oval olabel]
                   (let [id (str (:id field) "__" (fr/opt-slug oval))]
                     [:div.cb-shell
                      [:label.checkbox {:for id} " "
                       [:span.cb-input-shell
                        (fr/render-field {:name fname :id id :checked (contains? vals (str oval))
                                       :type :checkbox :value (str oval)})] " "
                       [:span.cb-label olabel]]]))]
    [:div.checkboxes
     ;; FIXME: this prevents checkbox values from being absent in the submitted
     ;; request, but at the cost of including an empty value which must be
     ;; filtered out. We can't use an empty input without the "[]" suffix
     ;; because nested-params Ring middleware won't allow it.
     (fr/render-field {:name fname :type :hidden})
     (for [[col colopts] (map vector
                              (range 1 (inc cols))
                              (partition-all cb-per-col opts))]
       [:div {:class (str "cb-col cb-col-" col)}
        (for [[oval olabel subopts] colopts]
           (if (empty? subopts)
             (build-cb oval olabel)
             [:div.cb-group
              [:h5.cb-group-heading olabel]
              (for [[oval olabel] (fu/normalize-options subopts)]
                (build-cb oval olabel))]))])]))

The above is simply copied from src/formative/render.cljx with the :nobr removed

[bensu]

:+1: @jkk thanks for the library, it is a life saver. Please consider the suggestion. @theJohnnyBrown thanks for the workaround

[iku000888]

Hey @theJohnnyBrown @bensu

Sorry for the long term silence of the project. I got write access to this repo from jkk and I would be happy to take a patch for this.

On a separate note, do you happen to have any insights on whether or not long lines would suddenly start wrapping by simply removing the :nobr on some browsers? Have not investigated it but just imagined the original intention by reading this: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/nobr.

[theJohnnyBrown]

Yes, it's possible that long lines may start wrapping if the <nobr> tag were removed, but again, this is non-standard HTML and the same effect can be accomplished with CSS.

[iku000888]

Thanks for confirming. Just to be clear I am all in favour for removing the :nobr, and just want to explore how the potential surprise can be mitigated. Please do feel free to go on with a PR .