input-text does not respect parent's flex settings

[aeberts]

My apologies if this is a misunderstanding of flexbox or how re-com works.

Note: The snippets below comes from: https://github.com/aeberts/redoo/blob/728015f4ea2622a669d753e6a8d4835d6a33685c/src/cljs/redoo/views.cljs#L22)

The input-text component doesn't seem to respect the flex settings of it's parent container:

(defn new-todo-input
  [{:keys [on-save]}]
  (let [val (r/atom "")
        stop #(reset! val "")
        save #(let [v (-> @val str clojure.string/trim)]
                (when (seq v) (on-save v))
                (stop))]
    (fn []
      [rc/box
       :size "auto"
       :child [rc/input-text
               :model val
               :placeholder "Enter a new todo"
               :on-change #(do (reset! val %)
                               (save))
               :change-on-blur? true]])))

Expected: rc/input-text inherits the flex settings of rc/box (i.e. :size "auto")

Actual: rc/input-text has a flex setting of: 0 0 auto

[nakiya]

Hi @aeberts, Did you manage to resolve this issue? I have the exact same problem.

[aeberts]

Hi @nakiya, I think the workaround would be to put the flex-box settings in the :style parameter or add a custom :class and style it from your css file. It's not as elegant as having a :size parameter in the input-text but I believe it would work (disclaimer: I haven't tried it yet myself).

[MawiraIke]

Unfortunately yes, in re-com, children take their own styling like flex, align e.t.c. If not provided, sometimes they get assigned to some calculated component defaults. For example in input-text, I think what you are seeing is the flex defaulting to none as seen here.

[superstructor]

This will be resolved by #284. Closing.