Problem with a custom React multi-select component

Using Streamlit
1

Summary

I am trying to create one multi-select React component. But when it gets rendered, the dropdown opens inside the “select” widget container.

Single select works perfectly.

What to do in such a case.

Steps to reproduce

Code snippet:
*** App.tsx

import React from "react"
import { Streamlit, withStreamlitConnection } from "streamlit-component-lib"
import { CustomSelectWidgets } from "./CustomSelectWidgets"
import AppStyle from "./AppStyle.module.css"
import { colourOptions } from "./Data/meceList"
const App = () => {
  React.useEffect(() => Streamlit.setFrameHeight())
  return (
    <>
      <div className={AppStyle.container}>
        <CustomSelectWidgets />
      </div>
    </>
  )
}

export default withStreamlitConnection(App)

*** CustomSelectWidgets.tsx

 
import * as React from "react"
import SelectWidgetsStyles from "./SelectWidgetsStyles.module.css"
import { Select, TYPE, Value } from "baseui/select"
interface IDropdownProps {
  options: any[]
  //IsMulti: boolean
}
export const CustomSelectWidgets = () => {
  const [value, setValue] = React.useState<Value>([])
  return (
    <div className={SelectWidgetsStyles.container}>
      <Select
        options={[
          { id: "AliceBlue", color: "#F0F8FF" },
          { id: "AntiqueWhite", color: "#FAEBD7" },
          { id: "Aqua", color: "#00FFFF" },
          { id: "Aquamarine", color: "#7FFFD4" },
          { id: "Azure", color: "#F0FFFF" },
          { id: "Beige", color: "#F5F5DC" },
        ]}
        labelKey="id"
        valueKey="color"
        placeholder="Choose a color"
        maxDropdownHeight="300px"
        type={TYPE.search}
        multi
        onChange={({ value }) => setValue(value)}
        value={value}
      />
    </div>
  )
}

Pic before selecting anything:

pic1
pic11462×72 1.11 KB

Pic after selecting anything:
pic3

If applicable, please provide the steps we should take to reproduce the error or specified behavior.

Expected behavior:

Explain what you expect to happen when you run the code above.

Actual behavior:

Explain the undesired behavior or error you see when you run the code above.
If you’re seeing an error message, share the full contents of the error message here.

Debug info

  • Streamlit version: (get it with $ streamlit version)
  • Python version: (get it with $ python --version)
  • Using Conda? PipEnv? PyEnv? Pex?
  • OS version:
  • Browser version:

Requirements file

Using Conda? PipEnv? PyEnv? Pex? Share the contents of your requirements file here.
Not sure what a requirements file is? Check out this doc and add a requirements file to your app.

Links

  • Link to your GitHub repo:
  • Link to your deployed app:

Additional information

If needed, add any other context about the problem here.

2

You can try to dynamically set the height of the component by use react hook:

import React, {useEffect, useState} from "react";

//store component height
const [height, setHeight] = useState()
// set componnet height when component rendered
useEffect(() => Streamlit.setFrameHeight(height))

Then add a dropdown event on your component to change height.

You can check similar component sac.cascader,and source code in StreamlitAntdComponents,hope it helps.

3

Thanks a lot. It worked with some tweaks using this link:

4

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.