Fork me on GitHub
#reagent
<
2022-10-30
>
agorgl17:10:22

Hello! I want to focus an html input element using a button's on-click event. I've managed to achieve this by storing a :ref in an atom and using (-> @input .focus) in the button's :on-click, everything implemented in a form-2 component, so far so good. The thing is, that I also want to show the input element on the button click first (I achieve that with :class ) and then focus the element. I suppose the problem is that when the button is clicked re-agent needs a few cycles to update the dom and for .focus to be effective I need to call it after the dom has been updated / input has been shown. Any ideas?

p-himik17:10:44

I'd wrap that input in another element that focuses itself in :component-did-mount.

agorgl17:10:45

I currently solved this using a js/setTimeout focus 1 but it seems a little bit non-deterministic

agorgl17:10:58

I'm searching for a way that avoids form-3 components

agorgl17:10:29

Idk, I just try to avoid them when possible 🙂

p-himik17:10:26

There's no practical reason to avoid them, unless you have an alternative that's shorter and not worse in some way. In this case, I don't know of any alternative.

agorgl17:10:38

Thank you!

👍 1
Lone Ranger04:11:26

I’m not sure if this has been answered or not but putting a good key on the the input does a lot to improving that sort of behavior

Lone Ranger04:11:56

for instance that way you don’t lose focus when typing into an input field with a controlled value

Jacob Emcken21:10:57

For those (like me) who like an online conversion tool for HTML (e.g. Tailwind components) to Hiccup: https://html2hiccup.dev/ As opposed to some of the existing tools it: • It preserves the SVG attribute viewBox as camel case. • It converts HTML comments ( <!-- the HTML comment -->) into Clojure comments: (comment "the HTML comment") • It doesn't generate invalid Hiccup when dealing with empty attributes like <a href="">Hello</a> Other than adding a button to easily copy the hiccup to the clipboard, I don't plan to add anything else. I hope others will find it useful.

👍 1
Omar01:10:09

Thanks for this! My go to converter is down https://htmltohiccup.herokuapp.com/ and yours came at a perfect time.

❤️ 1