Yomguithereal / react-blessed

A react renderer for blessed.
MIT License
4.46k stars 176 forks source link

Unable to scroll or select in <list> #62

Closed naholyr closed 6 years ago

naholyr commented 7 years ago

Here is my sample component:

import React, {Component} from 'react'
import faker from 'faker'

const bs = () =>
  `${faker.commerce.productName()} is incredible ${faker.company.bs()}`

export default class App extends Component {
  render() {
    const items = Array(50).fill().map(bs)
    return (
      <element>
        <list
          label="List"
          class={{
            border: { type: 'line'},
            style: { border: { fg: 'blue' } },
          }}
          width="50%"
          height="50%"
          left="25%"
          top="25%"
          style={{
            item: { fg: 'black' },
            selected: { fg: 'white', bg: 'black' },
          }}
          items={ items }
          onSelect={ () => console.error('selected') }
        />
      </element>
    );
  }
}

And the result, as expected:

screenshot at 12-37-30

The only drawback is that there is no interaction, I tried with arrows, mousewheel, vi shortcuts, with or without vi property… Nothing moves :( If I add clickable={ true } onClick={ () => console.log('clicked') } the "clicked" messages appear normally, but still nothing about scrolling or selecting item.

Is there some extra configuration I missed?

naholyr commented 7 years ago

I found the solution : add mouse={ true } and keys={ true } to enable all the mess :)

That may desserve a line in README ;)

Yomguithereal commented 7 years ago

Yup. blessed is somewhat cryptic at times and its documentation does not help to spot those usual issues.

That may desserve a line in README ;)

Well I will gladly merge a PR ;)

RRMoelker commented 6 years ago

Close ticket?