semantic ui reagent problems

[henryw374]

I appreciate this demo, but I think reagent is maybe not compatible with semantic-ui-react.

At first glance, the Input component appears to work, but after a key press the input box itself re-renders, causing the caret to move to the end. so for example if i enter 'aaaaa' and then place the caret somewhere in the middle of that and press b a few times, I get 'aabaaabbbb'. After the first b, the re-render causes the caret to lose position.

(defn input [] (reagent.core/with-let [state (reagent.core/atom "")] [:> ui/Input {:value @state :on-change (fn [_ v] (reset! state v.value))}]))

I would guess it is something to do with this https://github.com/Semantic-Org/Semantic-UI-React/blob/master/src/lib/ModernAutoControlledComponent.js, which is expecting you to use React's setState? In case you have a workaround I'd be interested to hear. thanks

[yogthos]

One workaround here could be to make the input uncontrolled and just set the initial value on focus, then reset the state atom on blur. This way the input won't repaint while the user is interacting with it.

[henryw374]

Yep that could work! Where using a simple input one can also avoid the semantic ui input and just use the semantic ui styling.

Or probably even better... switch out Reagent or semantic-ui-react to get a better pairing.

[yogthos]

Yeah, I think whether using semantic-ui-react components directly or just the styling depends on the type of component. In a lot of cases components work fine, but edge cases like this necessitate a bit of creativity. :)