I’m not sure how this is working:

(defsc ChildWithRef [_ {:keys [forwarded-ref label] :as props}] ; (1)
  {}
  (dom/button {:onClick #(some-> forwarded-ref .-current .focus)}
    label))

(def ui-child-with-ref (comp/factory ChildWithRef))

(def child-with-ref
  (react/forwardRef                         ; (2)
    (fn [js-props ref]
      (ui-child-with-ref                    ; (3)
        (-> js-props
            (js->clj :keywordize-keys true) ; (4)
            (assoc :forwarded-ref ref))))))

(defsc Root [_ _]
  {:use-hooks? true}
  (let [^:js ref (hooks/use-ref nil)]
    (div
      (dom/input {:ref ref, :value "" :type "text"})
      ((interop/react-factory child-with-ref) ; (5)
        {:ref ref :label "Focus, v3!"}))))    ; (6)

did you test this?

OH….I see…you’re calling the factory after messing with the props

yeah, it’s a little messy, but I see

Yes I tested it but feel there must be better way. I also realized later it does not cover the full use case, where my Fulcro component will be passed to a non-fulcro component and thus I likely need with-parent-context .

If you want to pass a Fulcro component AS the HOC, then I’d write a low-level function and make a factory for it (i.e. make a js hooks component), and do the “adapting” in that function. Then React is none the wiser. The new hooks use-component stuff makes that much easier to use when doing composition.

@tony.kay thanks a lot for that tip. I have applied it here https://gist.github.com/holyjak/ff152bb5c0edaf9575e0ba2b051e8a8a and it works perfectly. Anything you would change there?

A simplified example of using forwardRef while passing the component to a HoC JS component (thus needed with-parent-context), leveraging hooks/with-component here: https://github.com/holyjak/blog.jakubholy.net/blob/master/content/asc/posts/2022/forward-ref-in-fulcro.asc#passing-a-fulcro-component-wrapped-with-forwardref-to-a-hoc-js-component

I don’t have anything else right now. Sorry, don’t have time to look as carefully as I’d like