Custom component, crops drop down items

[moono]

• I’m trying to implement custom component with streamlit via streamlit template.

• I’m trying to simply wrap existing multi select react component.
  (i.e. react-multi-select-component - npm)

• But when I tried, the output dropdown items is not visible(cropped, I think)

• The code

import {
  Streamlit,
  StreamlitComponentBase,
  withStreamlitConnection,
} from "streamlit-component-lib"
import React, { ReactNode } from "react"
import MultiSelect from "react-multi-select-component";

interface State {
  isFocused: boolean;
  selected: any;
}

class MultiSelectCheckbox extends StreamlitComponentBase<State> {
  public state = { 
    selected: [
      { label: "Grapes 🍇", value: "grapes" },
      { label: "Mango 🥭", value: "mango" }], 
    isFocused: false }

  public render = (): ReactNode => {
    const options = [
      { label: "Grapes 🍇", value: "grapes" },
      { label: "Mango 🥭", value: "mango" },
      { label: "Strawberry 🍓", value: "strawberry", disabled: true },
      { label: "Watermelon 🍉", value: "watermelon" },
      { label: "Pear 🍐", value: "pear" },
      { label: "Apple 🍎", value: "apple" },
      { label: "Tangerine 🍊", value: "tangerine" },
      { label: "Pineapple 🍍", value: "pineapple" },
      { label: "Peach 🍑", value: "peach" },
    ];

    return (
      <div>
        <MultiSelect
        options={options}
        value={this.state.selected}
        // onChange={(d: string[]) => {this.setState({selected: d});}}
        labelledBy="Select"
      />
      </div>
    )
  }
}

export default withStreamlitConnection(MultiSelectCheckbox)

• Result output

  • before click
    
    
  • after click on down arrow(v)
    
    

• I’m new to React and I couldn’t figure out how to handle this problem. Can anyone help with this problem?

[moono]

Seems like overflowing inside iframe is impossible.

The official streamlit component could do this (like st.selectbox or st.multiselect) because I think they are not contained within the iframe.