Autofocus input inside tooltip causes scroll jump

[VijayashreeIngalahalli]

Opening a popper-tooltip with an autofocus input inside it, causes the page to jump (scroll). How can this be resolved?

Also, as I have an input inside the tooltip, the tooltip close should be handled only on click outside the tooltip, the scroll of the main page should not cause the tooltip to close, the tooltip in opened on focus and click of the element, so as stated in #85 and #59, handling this using the the controlled component, but the onVisibilityChange method is triggered when the cursor is moved outside the tooltip area or even if it is being scrolled. How can we handle this close of the popper-tooltip only on click outside the tooltip area?

[mohsinulhaq]

can you share a codesandbox depicting the issue?

[VijayashreeIngalahalli]

can you share a codesandbox depicting the issue?

https://codesandbox.io/s/react-popper-tooltip-example-zqnxf?file=/src/index.js , I have tried to create one. If the autoFocus is removed then the tooltip is visible, if the attribute is added then it jumps to the start of the page and the onVisibilityChange is being triggered, the state value is updated so the tooltip is not seen.

[VijayashreeIngalahalli]

One more example where the type is set to focus and as we have the textarea element inside the tooltip, on click of the textarea within the tooltip the focus is lost and tooltip closes, the focus should close when the user clicks outside for both the focus and click trigger.

https://codesandbox.io/s/react-popper-tooltip-example-pk9ks

[mohsinulhaq]

regarding the first one, two things:

• the default behavior of HTML focus is to scroll to the position of the element focussed on. Due to the way popper-js works, it initially renders the tooltip with position (0,0) and then moves it to the proper place. The jump is due to the focus going to (0, 0). In the sandbox, I have created a custom input component that does focus without scrolling. That is the only solution I have found so far.

• the tooltip was being hidden because by default closeOnReferenceHidden is set to true. So when the page was scrolling to top, the reference was hidden from the viewport and the tooltip hid itself. Set it to false if you don't want this behavior.

https://codesandbox.io/s/react-popper-tooltip-example-iscue
check this one out

[mohsinulhaq]

and in the second one, there is a typo, instead of trigger={("click", "focus")}, I think you meant to use an array. Anyway, check this out: https://codesandbox.io/s/react-popper-tooltip-example-ybb32
and let me know if it suffices.

[VijayashreeIngalahalli]

https://codesandbox.io/s/react-popper-tooltip-example-ybb32

Yeah, so it works with array as well as with the one being tried, so I want the tooltip to get displayed on focus as well as on click of the input element present, in the tooltip I have one more textarea on click of it the tooltip closes, or we can only use the trigger as focus as it is appropriate, but on click of the tooltip to enter the value the tooltip is closed.

[mohsinulhaq]

that's because, with focus trigger, it simply means that tooltip shows up on focus and hides on blur. So you can't really tell the library to use click trigger in one case and focus trigger in another. You could use a custom controlled tooltip with only click trigger and show the tooltip by defining your own focus handler.

[VijayashreeIngalahalli]

custom controlled tooltip

Ok will give a try! Thank you :)