Tippyjs: Feature Request: Explicitly set the popper's width based on reference width

[jemhuntr]

Hi!

First of all, this is a wonderful library built upon popperjs.

I'm trying to replace and standardize all my popups with tippy/popper to avoid off-screen and overflow issues. This includes form elements like custom searchable <select> inputs. I can easily move the popup into a tippy instance, although the positioning engine lets the content decide on the popper width.

Would it be possible to somehow keep the reference element's width (or height) at all times so the popup is constantly flush with the reference on both sides?

Currently, it requires a bit of work to manually set the size just to keep them in sync. Would be great if the library can handle this scenario built-in.

[atomiks]

Currently, it requires a bit of work to manually set the size just to keep them in sync

Is it something like this? Doesn't respond to reference size changes while showing though

tippy(ref, {
  distance: 0,
  onShow({ popper, reference }) {
    popper.style.width = reference.getBoundingClientRect().width + 'px'
  }
})

[jemhuntr]

Yep, something like that. I'd then have to manually track for scrolling/resize changes on the reference element so I can reupdate the width.

It'd be great if this could be built-in, since I believe this could be calculated as part of the events handled by popper.

[atomiks]

Detecting element resize requires some kind of ResizeObserver polyfill though

Maybe you can append the popper (using appendTo) to a parent wrapper that has a width that keeps both the popper and reference constrained in width.

https://codepen.io/anon/pen/yQWEgd

[jemhuntr]

I see the issue with needing a ResizeObserver polyfill. I guess this just has to be implemented in userland on a per use-case scenario.

Thank you for the alternative solution and the pen, it gave me some ideas with regards to other parts of my app. Though I might stick with updating the width on scroll/resize since the dropdowns may appear in unexpected areas with overflow issues and positioning constraints.

Thanks again, will close this issue now :)