Invoking setState with a tree that uses <layout> makes screen go blank

[ericandrewlewis]

Thanks for this awesome library 😄

I tried using the <layout> component from blessed which, although experimental, was a method I found to get inputs that shrink to their content's height rather than setting a percentage height on them.

I notice that the blessed readme calls the layout component experimental, but thought I'd offer a bug report anyway to see where it goes.

Using layout and setState causes the screen to go blank. See below for boilerplate to recreate the problem, with a tree that works next to it.

import React, {Component} from 'react';
import blessed from 'blessed';
import {render} from 'react-blessed';
import { exec } from 'child_process';

class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      searchFor: '',
      results: 'hiiiiiiiiiiiiiiiiiii'
    };
  }

  componentDidMount() {
    setTimeout(() => {
      this.setState(() => {
        return {
          results: 'hi'
        }
      });
    }, 1000 );
  }

  render() {
    // this will make everything disappear after setState()
    return (
      <form>
        <layout
          width="100%"
          height="shrink"
        >
          <box height="shrink" width="100%" border={{type: 'line'}}>hi</box>
          <box height="shrink" width="100%" border={{type: 'line'}}>
            {this.state.results}
          </box>
        </layout>
      </form>
    );

    // this works
    return (
      <form>
        <box height="50%">hi</box>
        <box height="50%" width="100%" top="50%">
          {this.state.results}
        </box>
      </form>
    );
  }
}

const screen = blessed.screen({
  autoPadding: true,
  smartCSR: true,
  title: 'react-blessed box animation'
});

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

render(<App />, screen);