Request: allow the use of a portal for the popover

[Trekiros]

trafficstars

Describe the solution you'd like

I would like to use this component within a scrollable container, in a way where the popover isn't clipped by the scrollable container

Describe alternatives you've considered

I have tried to use a portal to achieve this effect.

    const ref = useRef()

    return (
            <ReactTags
                renderListBox={({ children, ...props }) => !ref.current ? <></> : createPortal(
                    <div
                        {...props} 
                        className={styles.listBox} 
                        style={{ top: (ref.current.offsetTop + ref.current.clientHeight) + "px", left: ref.current.offsetLeft + "px" }}
                        onFocus={e => e.stopPropagation()}>
                            {children}
                    </div>,
                    document.body
                )}
                
                ... />
    )

However, when you click on anything outside of the ReactTags component (and due to the portal, the listbox is now considered outside), the listbox is removed. This happens before your click is able to add a tag from the list of suggestions.

Because of this, I believe this is a change that has to happen within the library itself, rather than in the code where I use the library. At least, I haven't been able to find a property which would allow me to cancel the removal of the listbox myself (note: this is what I tried to do with the onFocus prop - I also tried onClick, onMouseDown, and onBlur on the main component)

[i-like-robots]

Thanks for your question @Trekiros.

I believe this behaviour is due to the logic applied to the root component which will automatically close the listbox once focus leaves the component: https://github.com/i-like-robots/react-tag-autocomplete/blob/main/src/hooks/useRoot.ts#L28-L33

I'm sure the logic could be amended to take portals into account. This is not something I currently plan to look into as I don't currently have this use case but I'd welcome any contributions.