f4irline commented 7 months ago

Note:

This is the same fix as in #849, just targeted towards master-branch so that the v13 version can be patched.

Description

Popover positioning was not updated properly on the MultiSelect compoennt when it was used in a container with dynamic dimensions. For example when using the MultiSelect component in a modal, as the user selects items from the multiselect the modal would resize and the popover would get "detached" from the multiselect input.

This was fixed by introducing a React context for the Popover component which contains an updatePopover-function. The updatePopover function should be called in the context whenever the Popover should call the react-popper provided update function, which would handle calculating the position again.

Related Issue

Closes #848

Motivation and Context

This was done because using the MultiSelect component in a container which's dimensions may change dynamically was not possible due to the positioning issue mentioned in #848

How Has This Been Tested?

Styleguidist. I created a Modal with a MultiSelect component inside it with and tested it locally. I can create a proper example to the Modal-section of the Styleguidist with a MultiSelect component if you wish.

Screenshots (if appropriate):

Release notes

MultiSelect

Fixed an issue where the item list of MultiSelect component would be detached from the input field if the dimensions of the container containing the MultiSelect change. This would happen e.g. if using the MultiSelect component inside a Modal component.

riitasointi commented 7 months ago

This fix is very nice, but we'd rather publish it with version 14.0.0 which is coming just around the corner. Is there a specific reason why you would need it with version 13?