Multiselect: arrow incorrect position on scroll

[kayman233]

When the Multiselect component's dropdown opens upwards, the arrow indicator is incorrectly positioned when it's scrolled. Example from Storybook (with padding-top so that it opens upwards):

https://github.com/user-attachments/assets/6fad97d9-01f1-45d9-8f09-ffb733ca9ad4

[ildarin22]

Hi! Could you please tell me how to correctly use Multiselect? What is wrong here?

import {Multiselect} from "@telegram-apps/telegram-ui";
function Test() {
  const options = [
        { value: 'option1', label: 'option1' },
        { value: 'option2', label: 'option2' },
        { value: 'option3', label: 'option3' },
      ];
  const handleChange = (selected) => {
          setSelectedValues(selected);
          console.log('Select:', selected);
      };

   return (
       <Multiselect
                options={options}
                value={selectedValues}
                onChange={handleChange}
                placeholder="Select"
            >
                
            </Multiselect>

)


}

In StoryBook does not show the example.

[kayman233]

@ildarin22 In your example I can't see where you initialize your state, but the usage of the component is correct. This is not a bug in the component in your case. So please, for other questions ask them in the official telegram chat (t.me/devs) for developers.

[ildarin22]

@ildarin22 In your example I can't see where you initialize your state, but the usage of the component is correct. This is not a bug in the component in your case. So please, for other questions ask them in the official telegram chat (t.me/devs) for developers.

Ya, sorry, I missed useState In general, it seems that this component does not work inside the Modal component; at least, I don't know how to set it up correctly. However, if I write it outside of the Modal, it works fine. Thanks for link to chat!

UP: I noticed that if you add more than one component along with Multiselect in the Modal component, the dropdown stops working.

import {Multiselect, Modal} from "@telegram-apps/telegram-ui";
function Test() {
  const options = [
        { value: 'option1', label: 'option1' },
        { value: 'option2', label: 'option2' },
        { value: 'option3', label: 'option3' },
      ];

  const [selectedValues, setSelectedValues] = useState([]);
  const handleChange = (selected) => {
          setSelectedValues(selected);
          console.log('Select:', selected);
      };

   return (
   <Modal open={true}>
       <Multiselect
                options={options}
                value={selectedValues}
                onChange={handleChange}
                placeholder="Select"
            >
        </Multiselect>
          />
            <Input header="Name"></Input>
            {/* <Input header="Price"></Input>   */}  //  If uncomment this then stop working
   </Modal>
)}