Scroll blessed box with child elements

Question

I have a blessed box that is set with scrollable: true

let outerBox = blessed.box({
  top: '0%',
  left: '0%',
  width: '0%+6',
  height: '100%',
  scrollable: true,
  tags: true,
  padding: 1,
  mouse: true,
  style: {
    fg: 'white',
    bg: 'black'
  }
});

Inside it I have many elements that I want to be clickable.

[array of many elements].forEach((elem, i) => {
  let innerBox = blessed.box({
    content: elem,
    "height": "0%+1",
    "top": "0%+"+i,
    style: {
      hover: {
        bg: "black",
        fg: "white"
      }
    }
  });
  innerBox.on("click", (data) => {
    console.log("clicked",guild)
  });
  outerBox.append(server);
});

However if the elements have the style property set or listen for the click event handler, scrolling on them no longer scrolls the outer box. I have to scroll on the very edge of the box for it to actually scroll.

This works but I cannot detect clicks:

[array of many elements].forEach((elem, i) => {
  let innerBox = blessed.box({
    content: elem,
    "height": "0%+1",
    "top": "0%+"+i
  });
  outerBox.append(server);
});

How can I scroll the outer box with a mousewheel while still being able to detect clicks on the inner elements?

Answer 1

I solved this by using a List instead of a Box full of Boxes. A list is scrollable and can have selectable elements.