How do I make interactive applications?

[Ian Remmel]

I feel like I'm missing something, but I'm struggling to figure out how to make interactive apps with react-blessed. All of the examples appear to be purely rendering content with zero user interaction. Is there an example somewhere of an interactive app?

[Jason L Perry]

From Blessed's FAQ, this is probably the first bit:

Why can't I use my mouse in Terminal.app?
Terminal.app does not support mouse events.

If you want to respond to keyboard input, I guess you'd just listen to stdin like anything else, and change your state based on that, re-rendering the UI. I don't think the components themselves need to have event handlers like the DOM stuff in ReactDOM. I could be wrong.

[snek]

to add on to this, is it possible to handle the input that happens with textboxes and elements like that?

[Ian Remmel]

I haven't really been back to this since about the time I opened the issue, but to be useful for interactive apps, it seems like the elements should have focus and blur events like normal DOM elements, as well as natural ordering with the ability to override, again, like normal DOM elements.

Basically, I can't see how to build interactive apps without having the same primitives that browsers provide for keyboard-only interaction. If that's not an option, then some documentation explaining alternatives would go a long way toward improving the developer experience.

[snek]

as a followup to my original quesiton, i was able to use react refs to interact with the textarea i spawned and attach the necessasary listeners and handlers for text input

[Guillaume Plique]

Can I help somehow?

[zach-is-my-name]

@devsnek it's been a while but do you recall being able to go beyond submitting form text to actually capturing text "onChange" (non-existent in blessed)?

I'm struggling to capture live input for a fuzzy-finder lib

[Guillaume Plique]

There is not onChange or onInput I know of in blessed unfortunately. This said, have you tried onKeypress (keypress being an event of a blessed Element)? With some work it could be possible to make it work like you want maybe?

[zach-is-my-name]

*Edit: The ref updates immediately as seen in react-devtools (linked below), the problem is capturing that update (logging it, passing it) when it's clearly there...

---

Thanks for the reply. Yes, that is the strategy I'm using at the moment, the problem I'm encountering is textboxRef.current.value only updates at the end of a cycle*... So with

const handleKeyPressTextbox = (ch, key) => {
    if (textboxRef.current.value) {
      setText(textBoxRef.current.value)
    }
  }

I Type: Vive La France
My State will be: Vive La Franc

Always one behind with a ref.

@devsnek above talks about adding additional listeners to make it work, I have no experience with adding listeners or even a logical starting point to learn to do so. Any thoughts?

---

Update: Got some help on SO which gets me unstuck. https://stackoverflow.com/questions/73134979/useref-value-in-devtools-but-not-logged#73135578

I'm still none-the-wiser