keys prop does not work on List component

[lilactown]

Example:

import React, { Component } from "react";
import blessed from "blessed";
import { render } from "react-blessed";

class App extends Component {
  render() {
    return (
      <list
        keys={true}
        width="100%"
        height="100%"
        top={0}
        left={0}
        fg="green"
        items={["1", "2", "3", "4"]}
      />
    );
  }
}

const screen = blessed.screen({
  autoPadding: true,
  smartCSR: true,
  title: "react-blessed hello world",
});

screen.key(["escape", "q", "C-c"], function(ch, key) {
  return process.exit(0);
});

const component = render(<App />, screen)

And a working vanilla-blessed solution:

const blessed = require("blessed");

const screen = blessed.screen({
  autoPadding: true,
  smartCSR: true,
  title: "react-blessed hello world",
});

// Adding a way to quit the program
screen.key(["escape", "q", "C-c"], function(ch, key) {
  return process.exit(0);
});

const list = blessed.list({
  parent: screen,
  keys: true,
  left: 0,
  top: 0,
  width: "100%",
  height: "100%",
  fg: "green",
  items: ["1", "2", "3", "4"],
});

screen.render();

[Yomguithereal]

Hum... I won't have time to investigate this before next week @Lokeh. Don't hesitate to open a PR if you feel like it. Else, you can ping me next week if I forget.

[lilactown]

I'll investigate as much as I can. Where do I find react-fiber-types for flow?

[lilactown]

It looks like an issue with blessed. I filed an issue: chjj/blessed#325

Perhaps we could special-case list when it gets added to the tree to add a parent attribute instead of appending it? 😬

[lilactown]

Or, figure out a way to attach event handlers only to the top-level screen and then somehow differentiate the events, kind of like how react-dom does.

[geyang]

@Lokeh would you mind elaborate? Thanks in advance

---update--- I mis-read your comment and thought you found a cure!